リアクトネイティブ

ReactナビゲーションナビゲーターcreateSwitchNavigator



React Navigation Navigator Createswitchnavigator



記事のディレクトリ

火

createSwitchNavigator（RouteConfigs,SwitchNavigatorConfig）

パラメータの説明

RouteConfigs

こちらをチェック



SwitchNavigatorConfig

  1. initialRouteName：switchNavigatorに初めて入るときに表示される最初のページ。その値はRouteConfigsのキーである必要があります。
  2. resetOnBlur：Boolean現在のSwitchNavigatorをそのままにして、すべてのナビゲーターのステータスをリセットします。デフォルトtrue
  3. backBehavior：リターンキーが押されたときのアクションを設定するために使用されます。値'initialRoute'戻るボタンを押して戻るinitialRouteName対応するページの値'none'前のページに戻る。デフォルト'none'

該当シーン

backBehaviorの値がデフォルト値の場合none登録ページまたはログインページからホームページにジャンプするときは、システムの戻るボタンを押して、登録ページまたはログインページに戻らないでください。

例

App.js

import React from 'react' import { createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation' import Home from './components/Home' import Login from './components/Login' const LoginNavigator = createStackNavigator({ Login:{ screen:Login, navigationOptions: { title: 'log in' } } },{ headerLayoutPreset:'center' }) const HomeNavigator = createStackNavigator( { Home: { screen: Home, navigationOptions: { title: 'Home' } } },{ headerLayoutPreset:'center' } ) const SwitchNavigator = createSwitchNavigator({ Login: { screen:LoginNavigator }, Home:{ screen:HomeNavigator } },{ backBehavior:'none' }) export default createAppContainer(SwitchNavigator)

Login.js

import React from 'react' import {View, Text, Button} from 'react-native' export default class Login extends React.Component{ render(){ return( <View> <Text>Login</Text> <Button title={'log in'} onPress={()=>{ this.props.navigation.navigate('Home') }}/> </View> ) } }

Home.js

import React from 'react' import {View, Text, Button} from 'react-native' export default class Home extends React.Component{ render(){ return ( <View> <Text>Home</Text> <Text>Press the back button at this time to exit the application.</Text> </View> ) } }