如何在react导航-6中重构“createSwitchNavigator”代码？
如何在react导航-6中重构“createSwitchNavigator”代码？
提问于 2022-01-01 05:01:23
下面是使用react导航版本-4的代码。但是在版本6中，createSwitchNavigator被完全删除了.如何重构以下代码以使其工作？我不想使用反应-本机-比较包。
import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import AccountScreen from './src/screens/AccountScreen';
import SigninScreen from './src/screens/SigninScreen';
import SignupScreen from './src/screens/SignupScreen';
import TrackCreateScreen from './src/screens/TrackCreateScreen';
import TrackDetailScreen from './src/screens/TrackDetailScreen';
import TrackListScreen from './src/screens/TrackListScreen';
const switchNavigator = createSwitchNavigator({
loginFlow: createStackNavigator({
Signup: SignupScreen,
Signin: SigninScreen,
}),
mainFlow: createBottomTabNavigator({
trackListFlow: createStackNavigator({
TrackList: TrackListScreen,
TrackDetail: TrackDetailScreen,
}),
TrackCreate: TrackCreateScreen,
Account: AccountScreen,
}),
});
export default createAppContainer(switchNavigator);回答 1
Stack Overflow用户
发布于 2022-01-01 08:27:41
我能够成功地重构反应导航版本-6中的代码。完整的代码可以在沙盒中获得。
App.js
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import RootNavigator from "./src/routes/createRootNavigator";
export default function App() {
return (
<NavigationContainer>
<RootNavigator></RootNavigator>
</NavigationContainer>
);
}
});createRootNavigator.js
.
.
const loginFlowStack = createNativeStackNavigator();
const trackListStack = createNativeStackNavigator();
const mainFlowBottomTabNavigator = createBottomTabNavigator();
function trackListStackNavigator() {
return (
<trackListStack.Navigator>
<trackListStack.Screen name="TrackList" component={TrackListScreen} />
<trackListStack.Screen name="TrackDetail" component={TrackDetailScreen} />
</trackListStack.Navigator>
);
}
const RootNavigator = (signedIn = false) => {
if (!signedIn) {
return (
<loginFlowStack.Navigator>
<loginFlowStack.Screen name="SignUp" component={SignUpScreen} />
<loginFlowStack.Screen name="SignIn" component={SignInScreen} />
</loginFlowStack.Navigator>
);
} else {
return (
<mainFlowBottomTabNavigator.Navigator>
<mainFlowBottomTabNavigator.Screen
name="trackListStackNavigator"
component={trackListStackNavigator}
options={{ headerShown: false }}
/>
<mainFlowBottomTabNavigator.Screen
name="TrackCreate"
component={TrackCreateScreen}
/>
<mainFlowBottomTabNavigator.Screen
name="Account"
component={AccountScreen}
/>
</mainFlowBottomTabNavigator.Navigator>
);
}
};
export default RootNavigator;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70547042
复制相关文章
相似问题
腾讯云开发者
