Javascript 反应导航：在多选项卡导航中使用单屏幕组件

我正在使用

createMaterialTopTabNavigator

创建带有两个不同选项卡的顶部选项卡导航

每个选项卡显示一个图像-汽车或卡车

我想做的是使用单屏幕组件，而不是双组件屏幕（我现在有）。显示的选项卡屏幕的图片会根据活动选项卡而更改

这在react导航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>
  );
}

import*as React from'React'；
从“react native”导入{Text，View}；
从'@react-navigation/native'导入{NavigationContainer}；
从“@react navigation/material top tabs”导入{createMaterialTopTabNavigator}；
函数CarScreen（）{
返回(
汽车形象
);
}
函数TruckScreen（）{
返回(
卡车图像
);
}
const Tab=createMaterialTopTabNavigator（）；
函数MyTabs（）{
返回(
);
}
导出默认函数App（）{
返回(
);
}

您可以使用

props.route.name

访问路由名称，并且可以使用该条件更改图像

我还在这里做了一份点心：

函数CarOrTruck（{route}）{
常量getImageUrl=（路由名称）=>{
如果（routeName==='Car'）{
返回'https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg'
}否则如果（routeName===‘卡车’）{
返回'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';
}否则{
返回'https://brayve.net/wp-content/uploads/2019/06/4004/the-secret-history-of-the-google-logo.jpg-23keepProtocol'
}
}
const imageUrl=getImageUrl（route.name）；
返回(
);
}

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

---

我不太明白你的问题，但几天前我制作了一个react nativigation应用程序，使用了与MaterialBottomTabNavigator:类似的Patrn，所以如果这有帮助的话。。。