我用的是 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>
);
}
你可以通过使用 props.route.name
而你可以通过使用该条件改变图像。
我还在这里做了一个小吃。https: /snack.expo.io@gie3dshallow -蓝莓。
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中,它指的是组件={汽车或卡车}。
<Tab.Screen
name="Car"
component={CarOrTruck}
options={{ tabBarLabel: 'Car' }}
/>
<Tab.Screen
name="Truck"
component={CarOrTruck}
options={{ tabBarLabel: 'Truck' }}
/>