我发现使用react-native-navigation很难导航到另一个页面,我正在寻找的工作流程是A -〉B,然后当我按下B中的任何按钮时,应该转到A,每当我单击A中的按钮时,它会转到B,但没有单击任何按钮,它会再次将我重定向到A,底部选项卡导航器中也发生了同样的问题。
这是我的栈和底部标签导航器的代码,
function MyTabs() {
const isDarkMode = useColorScheme() === 'dark';
return (
<Tab.Navigator
screenOptions={({ route }) => ({
headerShown: false,
tabBarShowLabel: false,
gestureEnabled: false,
tabBarStyle: {
backgroundColor: isDarkMode ? Color.Black : Color.White,
borderTopWidth: 1,
borderColor: isDarkMode ? Color.White : Color.White,
height: 80,
},
tabBarIcon: ({ focused }) => (
<View>
{route.name === 'Profile' ? (
<MaterialIcons
name="person"
size={30}
color={isDarkMode ? (focused ? Color.White : Color.DarkGrey) : (focused ? Color.Black : Color.LightGrey)}
style={{
textAlign: 'center',
marginTop: 10
}}
/>
) : (
<Image
source={Images.Explore}
resizeMode="contain"
style={{
width: 30,
height: 30,
tintColor: isDarkMode ? (focused ? Color.White : Color.DarkGrey) : (focused ? Color.Black : Color.LightGrey),
marginTop: 8
}}
/>
)}
</View>
),
tabBarLabelStyle: {
fontSize: 15,
}
})}
>
<Tab.Screen name="Explore" component={Explore} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
);
}
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="Splash"
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen name="Splash" component={Splash} options={{ headerShown: false }} />
<Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
<Stack.Screen name="Register" component={Register} options={{ headerShown: false }} />
<Stack.Screen name="BottomTabs" component={MyTabs} options={{ headerShown: false, gestureEnabled: false, }} />
</Stack.Navigator>
</NavigationContainer>
);
}
1条答案
按热度按时间k2arahey1#
我觉得你需要知道这个