react-native - 使用 react Native DrawerNavigator 注销

Question

我正在构建一个 react-native 应用程序(App Image)，它在抽屉导航器上有注销链接。

代码如下

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

export default DrawerScreen;

但问题是，它只是加载组件屏幕。我需要调用一个方法，我可以在其中执行 Asyncstorage clear 并导航到 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';让它工作。

更新:

在 4.x 版本的 react-navigation 中，您应该导入 `import {DrawerNavigatorItems} 来自 “ react 抽屉导航”

您应该导入 SafeAreaView 来自“ react 原生安全区域 View ”