react-native - 在 React Navigation v5 中为嵌套路由实现 StackRouter

Question

我有一个具有以下屏幕层次结构的本机应用程序

RootNavigator
  |
  |---AppNavigatorStack
  |     |--Screen1
  |     |--Screen2
  |
  |---LoginNavigatorStack
        |--loginScreen
        |--forgotPasswordScreen

我一直在尝试StackRouter为此工作流程创建一个

const options = {
  initialRouteName: 'LoginNavigatorStack',
}

const routerConfigOptions = {
  routeGetIdList: {},
  routeNames: ["AppNavigatorStack", "LoginNavigatorStack"],
  type: 'stack',
  routeParamList: {}
}

let router = StackRouter(options)

如何在 StackRouter 中配置routerConfigOptions使用类似getStateForAction的功能getInitialState

创建新状态的示例代码

const action = CommonActions.reset({
    index: 0,
    routes: [{name: "Screen2"}],
})

let newState = router.getStateForAction(state, action, routerConfigOptions)

state- 我们可以从 NavigationContainer 的 onStateChange 获取应用程序的当前状态对象

newState 的结果是 null 因为我还没有在 routerConfigOptions 中添加 Screen1、Screen2、loginScreen、forgotPasswordScreen

我实际上期待一个新状态，它应该具有导航到 loginScreen 的详细信息。

如何添加所有嵌套屏幕并为此创建 StackRouter？

标签： react-nativereact-navigation

Answer 1

你的语法看起来更像 react-navigation < 4。我将在这里发布，我是如何使用 react-navigation v5 做到的。

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const LoginStack = createStackNavigator();
const AppStack = createStackNavigator();
const RootStack = createStackNavigator();

const LoginStackNavigator = () => {
    return (
        <LoginStack.Navigator>
            <LoginStack.Screen name="LoginScreen" component={LoginScreen}/>
            <LoginStack.Screen name="ForgotPasswordScreen" component={ForgotPasswordScreen}/>
        </LoginStack.Navigator>
    )
}

const AppStackNavigator = () => {
    return (
        <AppStack.Navigator>
            <AppStack.Screen name="Screen1" component={Screen1}/>
            <AppStack.Screen name="Screen2" component={Screen2}/>
        </AppStack.Navigator>
    )
}

const RootStackNavigator = () => {
    return (
        <RootStack.Navigator>
            <RootStack.Screen name="LoginStackNavigator" component={LoginStackNavigator}/>
            <RootStack.Screen name="AppStackNavigator" component={AppStackNavigator} />
        </RootStack.Navigator>
    )
}



const App: () => React$Node = () => {
    return (
        <NavigationContainer>
            <RootStackNavigator/>
        </NavigationContainer>
    );
};