使用react Native DrawerNavigator注销

Question

我正在构建一个react-native app（App Image），它在Drawer Navigator上有Logout链接。

代码如下

 const DrawerScreen = DrawerNavigator({
    ..........
    logout: {
        screen: Component   
    },
})

export default DrawerScreen;

但问题是，它只加载组件屏幕。我需要调用一个方法，我可以执行Asyncstorage清除并导航到LoginPage。

Answer 1

您可能想要在抽屉中添加一个按钮。如果是这样，您的代码将如下所示。

const Drawer = DrawerNavigator(
{
    mainpage:{screen:MyScreen}
},
{
    contentComponent:(props) => (
        <View style={{flex:1}}>
            <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
                <DrawerItems {...props} />
                <Button title="Logout" onPress={DO_SOMETHING_HERE}/>
            </SafeAreaView>
        </View>
    ),
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
})

您应该导入import {DrawerItems} from 'react-navigation';以使其正常工作。

Answer 2

const DrawerNavigation = createDrawerNavigator(
  {
    Mainpage: {
      screen: Mainpage
    }
  },
  {
    contentComponent:(props) => (
      <View style={{flex:1}}>
          <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
            <DrawerItems {...props} />
            <TouchableOpacity onPress={()=>
              Alert.alert(
                'Log out',
                'Do you want to logout?',
                [
                  {text: 'Cancel', onPress: () => {return null}},
                  {text: 'Confirm', onPress: () => {
                    AsyncStorage.clear();
                    props.navigation.navigate('Login')
                  }},
                ],
                { cancelable: false }
              )  
            }>
              <Text style={{margin: 16,fontWeight: 'bold',color: colors.textColor}}>Logout</Text>
            </TouchableOpacity>
          </SafeAreaView>
      </View>
    ),
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
  }
);

Answer 3

您可以使用Component类执行Asyncstorage清除并导航登录页面。如果你使用react-navigation this.props有导航对象。

class YourComponent extends Component {
    constructor(props) {
        super(props);
     }

    componentWillMount() {
        Asyncstorage.clear();
        this.props.navigation.navigate('LoginPage')
    }
}
export default YourComponent;

Answer 4

您可以创建一个模态，为您执行此操作。单击注销 - >使用可见属性显示模式并单击是然后关闭模态 - >导航到登录屏幕。

Answer 5

只需使用AlertView兄弟，这将有所帮助，但在上面的例子中，如果你有一个标题比这个（this.props.navigation.navigate（'LoginPage'））

不会有任何意义

您的视图将加载到标题下方