web-dev-qa-db-ja.com

React Native DrawerNavigatorを使用したログアウト

Drawer Navigatorにログアウトリンクがある反応ネイティブアプリ（ App Image ）を構築しています。

コードは以下の通りです

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

export default DrawerScreen;

しかし、問題は、コンポーネント画面の読み込みのみです。 Asyncstorage clearを実行してLoginPageに移動できるメソッドを呼び出す必要があります。

react-nativenavigation-drawerlogoutreact-navigation
7
Gouranga Panigrahi

おそらく、引き出しにボタンを追加する必要があります。その場合、コードは次のようになります。

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';動作させる。

更新：

  1. React-navigationの4.xバージョンでは、 `import {DrawerNavigatorItems} from 'react-navigation-drawer'をインポートする必要があります
  2. インポートする必要がありますSafeAreaView 'react-native-safe-area-view'から
18
Bright Lee
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'
  }
);
4
Bennet roy

コンポーネントクラスを使用して、Asyncstorageのクリアを実行し、ログインページに移動できます。 react-navigationを使用する場合、this.propsにはナビゲーションオブジェクトがあります。

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

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

上記の例では、これよりもヘッダーがある場合に役立つAlertView broを使用します（this.props.navigation.navigate（ 'LoginPage'））

意味がありません

ビューはヘッダーの下に読み込まれます

0
kunal pal

これを行うモーダルを作成できます。ログアウトをクリックして->表示属性を使用してモーダルを表示し、はいをクリックしてモーダルを閉じます->ログイン画面に移動します。

0
Rigorous implementation