Question

您好我有反应导航的代码。我想在快速单击按钮时阻止导航两次。这段代码完美无缺。这是我的 SignedOut 导航

export const SignedOut = StackNavigator({
    Onboarding: {
        screen: Onboarding,
        navigationOptions: {
            title: "Onboarding",
            header: null
        }
    },
    InitApp: {
        screen: InitApp,
            navigationOptions: {
            title: "Init",
            header: null
        }
    },
    Auth: {
        screen: Auth,
        navigationOptions: {
            title: "Auth",
            header: null
        }
    }
});
const navigateOnce = (getStateForAction) => (action, state) => {
        const {type, routeName} = action;
        return (
        state &&
            type === NavigationActions.NAVIGATE &&
            routeName === state.routes[state.routes.length - 1].routeName
    ) ? null : getStateForAction(action, state);       
};
SignedOut.router.getStateForAction = navigateOnce(SignedIn.router.getStateForAction);

它工作得很好。但是今天我想在StackNavigator中添加params并且 navigateOnce 没有工作！

这样的代码：

export const SignedOuts = (firstTime = false) =>
    StackNavigator({
        Onboarding: {
        screen: Onboarding,
        navigationOptions: {
            title: "Onboarding",
            header: null
        }
    },
    InitApp: {
        screen: InitApp,
            navigationOptions: {
            title: "Init",
            header: null
        }
    },
    Auth: {
        screen: Auth,
        navigationOptions: {
            title: "Auth",
            header: null
        }
     }
    },
    {
        initialRouteName: firstTime ? "Onboarding" : "Auth",            
    }
)

它说：无法读取属性＆getStateForAction＆＃39;未定义的

我该怎么办？

Answer 1

如果您使用navigate方法，并且想要阻止导航两次（即阻止屏幕被按两次），那么您应该设置屏幕的key。

this.props.navigation.navigate({'key':'NewsFeed', routeName:'NewsFeedScreen'})

我没有使用带有react-navigation的路由器，而且文档看起来很稀缺。我的建议是浏览StackRouter here的代码，看看如何将唯一键传递给每个屏幕。这应该可以防止您面临的问题

双击按钮快速反应原生时防止导航

1 个答案: