在底表中有条件

时间:2019-05-07 12:25:41

标签: react-native react-navigation react-navigation-stack

我从React Native开始,这里有这个小问题。我有一个bottomTabNavigator,如果用户有权限,他将导航到ImageScreen,否则,它将导航到HomeScreen。

我的函数global.hasPermission()检查许可权并返回true或false,因此我希望能够根据函数返回的内容来更改{screen:ImageScreen}。我该怎么做?我在哪里调用函数hasPermission()?

这是我的tabNavigator:

const BottomTab = createBottomTabNavigator({
    Image: {
        screen: ImageScreen,
        navigationOptions: {
            tabBarLabel: 'Image Screen',
            tabBarIcon: ({ tintColor, focused }) => (
                <Ionicons
                    name={'ios-camera'}
                    size={focused ? 30 : 26}
                    style={{ color: tintColor }}
                />
            ),
        },
    },
});

1 个答案:

答案 0 :(得分:1)

在我的应用中,我通过 React Context API https://reactjs.org/docs/context.html

处理身份验证

几天前,我回答了一个类似的问题,您可以在此处查看如何创建使用上下文的方法:How Redirect to Login if page is protected and the user is not signed in?

就像我之前的回答一样,您可以将用户权限检入 ImageScreen componentDidMount(),并且,如果他没有权限,则可以将其重定向到主屏幕像这样(假设您的主屏幕包含在Stack Navigator中):

// into your ImageScreen
componentDidMount () {
  const hasPermission = YourFunctionWhichReturnsTrueOrFalse()
  if (!hasPermission) this.props.navigation.navigate('home') // the title of your home screen here
}