Question

我正在使用react native，使用redux和react导航。我有一切设置，但是，我得到一个奇怪的问题/错误

在我的减速机中，我有以下内容

const initialNavState = {
    index: 1,
    routes: [
        { key: 'Login', routeName: 'Login' },
        { key: 'ResetPassword', routeName: 'ResetPassword' },

    ],
};

const initialAuthState = { isLoggedIn: false };

const AppReducer = combineReducers({
    nav: (state = initialNavState, action) => {

        switch(action.type) {
            case 'Login':
                return AppNavigator.router.getStateForAction(NavigationActions.back(), state);
            case 'Logout':
                return AppNavigator.router.getStateForAction(NavigationActions.navigate({ routeName: 'Login' }), state);
            case 'ResetPassword':
                return AppNavigator.router.getStateForAction(NavigationActions.navigate({ routeName: 'ResetPassword' }), state);
            case 'Home':
                return MainScreenNavigator.router.getStateForAction(NavigationActions.navigate({ routeName: 'Home' }), state);
            default:
              return AppNavigator.router.getStateForAction(action, state);
        }
    }
});

export default AppReducer;

这很好用，我可以更好地导航我的两个视图，但是当我添加另一条路径时

{key：'Home'，routeName：'Home'}，

我收到以下错误“没有为key定义的路由必须通过login resetpassword之一。

不确定我做错了什么？

更新了我的路由器

// Native tab navigation
export const TabsNavigation = TabNavigator({
    Home: {
        screen: Home,
        navigationOptions: ({ navigation }) => ({
            tabBarLabel: 'Home',
            headerLeft : <DrawerIcon navigation={navigation} />,
            tabBarIcon: ({ tintColor }) => <Icon name="home" size={28} color={tintColor} type={"font-awesome"} />
        }),
    },
    Photos: {
        screen: Photos,
        navigationOptions: {
            tabBarLabel: 'Photos',
            tabBarIcon: ({ tintColor }) => <Icon name="camera" size={28} color={tintColor} type={"font-awesome"} />
        },
    },
    SiteDiary: {
        screen: SiteDiary,
        navigationOptions: {
            tabBarLabel: 'Site Diary',
            tabBarIcon: ({ tintColor }) => <Icon name="cog" size={28} color={tintColor} type={"font-awesome"} />
        },
    },
});

export const AppNavigator = StackNavigator({
    Login: {
        screen: Login,
        navigationOptions: {
            title: "Login",
            headerLeft: null
        },
        initialRouteName : 'Home'
    },
    ResetPassword: {
        screen: ResetPassword,
        navigationOptions: {
            title: "Reset Password",
            headerLeft: null
        },
    }
});

// Main navigation StackNavigator
export const MainScreenNavigator = StackNavigator({
    Home: {
        screen: TabsNavigation,
        navigationOptions: {
           title: "Home",
            headerLeft: null,
        }
    }
});

Index.js（主要）

// App state
const AppWithNavigationState = connect( state => ({ nav: state.nav})) (({ dispatch, nav }) => (
    <AppNavigator navigation = { addNavigationHelpers ({ dispatch, state: nav })} />
));


class App extends React.Component {
    store = createStore(AppReducer, undefined, autoRehydrate());

    componentDidMount() {
        persistStore(this.store, { storage: AsyncStorage });
    }

    render() {
        return (
            <Provider store={this.store}>
                <AppWithNavigationState />
            </Provider>
        );
    }
}
AppRegistry.registerComponent('App', () => App);

export default App;

我的核心问题是我的主文件上的AppNavigator，我正试图拥有 AppNavigator - 它包含所有公共登录视图 MainScreenNavigator - 这是主要的应用程序然后添加一个darwer但现在很高兴得到这个工作。

问题是我不确定如何在StackNavigator之间跳转

没有为密钥定义路由

0 个答案: