React Navigation：在多个选项卡导航中使用单个屏幕组件答案

【问题标题】：React Navigation: Using single screen component in multiple tab navigationReact Navigation：在多个选项卡导航中使用单个屏幕组件
【发布时间】：2020-08-21 20:16:14
【问题描述】：

我正在使用createMaterialTopTabNavigator 创建带有两个不同标签的顶部标签导航。

每个标签显示一个图像 - 汽车或卡车。

我想要做的是使用单个屏幕组件而不是双组件屏幕（我现在拥有）。显示的选项卡屏幕图片根据活动选项卡而变化。

这在 react-navigation 5 中是否可行。

这是我目前所拥有的：

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

function CarScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Image of car</Text>
    </View>
  );
}

function TruckScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Image of truck</Text>
    </View>
  );
}


const Tab = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Car"
    >
      <Tab.Screen
        name="Car"
        component={FeedScreen}
        options={{ tabBarLabel: 'Car' }}
      />
      <Tab.Screen
        name="Truck"
        component={NotificationsScreen}
        options={{ tabBarLabel: 'Truck' }}
      />
    </Tab.Navigator>
  );
}
export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

【问题讨论】：

不确定能理解您的问题，但几天前我使用 MaterialBottomTabNavigator 的类似模式制作了一个反应导航应用程序：github.com/samuel3105/react-native-navigation，所以如果这可以帮助...

标签： javascript reactjs react-native react-navigation react-navigation-v5

【解决方案1】：

您可以使用props.route.name 访问路线名称，并且可以使用该条件更改图像。

我也在这里做了点心：https://snack.expo.io/@gie3d/shallow-blueberries


function CarOrTruck({route}) {
  const getImageUrl = (routeName) => {
    if (routeName === 'Car') {
      return 'https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg'
    } else if (routeName === 'Truck') {
      return 'https://www.volvotrucks.com/content/dam/volvo/volvo-trucks/masters/press-releases/2020/feb/pr-2952-fh/high-res-08A3977-FH-4x2-semi-trailer-long-haul-on-road.jpg';
    } else {
      return 'https://brayve.net/wp-content/uploads/2019/06/4004/the-secret-history-of-the-google-logo.jpg-23keepProtocol'
    }
  }

  const imageUrl = getImageUrl(route.name);
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Image source={{uri: imageUrl}} style={{width: 200, height: 100, resizeMode: 'contain'}} />
    </View>
  );
}

所以在你的 2 中，它指的是 component={CarOrTruck}

 <Tab.Screen
    name="Car"
    component={CarOrTruck}
    options={{ tabBarLabel: 'Car' }}
/>
<Tab.Screen
    name="Truck"
    component={CarOrTruck}
    options={{ tabBarLabel: 'Truck' }}
/>

【讨论】：