Reactative navigation

Question

私はReactNativeアプリケーションのナビゲーションシステムを実装するのに非常に苦労しています。 index.jsは次のとおりです。

class Test extends Component { 


    render() { 

    const routes = [ 
     {title: 'LoginScreen', index: 0}, 
     {title: 'RegisterScreen', index: 1}, 
    ]; 

    return (
     <Navigator 
     initialRoute={routes[0]} 
     initialRouteStack={routes} 
     renderScene={(route, navigator) => 
      <TouchableHighlight onPress={() => { 
       navigator.push(routes[1]); 
      }}> 
      <Text>Hello {route.title}!</Text> 
      </TouchableHighlight> 
     } 
     style={{padding: 100}} 
     /> 
    ) 
    } 

} 

firebase.auth().onAuthStateChanged(function(user) { 
    if (user) { 

    } else { 

    } 
}); 

現時点では、私は単に文書から直接ナビゲーションを書いています。しかし、Firebaseユーザをチェックするときに、if文の中の別の画面に移行したいと思っています。ユーザーが存在する場合は1つのシーンに移行し、そうでない場合は別のシーンに移行します。 私はこの非常に貧しい人々のドキュメンテーションを見つけるので、この移行方法を変更する基本的な考え方を構築することすらできません。

Answer 1

あなたは間違いなく、以下の例を使用することができ、それは彼が、ユーザーを発見した場合は2で画面上にホップまたは既に存在しているユーザー

1. index.android.jsを想定すると、1

によって画面上にホップ

import React,{Component} from 'react'; 
import{ 
    AppRegistry, 
    StyleSheet, 
    Text, 
    ScrollView, 
    Navigator, 
    View, 
} from 'react-native'; 
import Navigation from './navigation' 

export default class Example extends Component{ 
    constructor(){ 
    super(); 
    this.state={ 
     username: 'ABC', 
    } 
    } 

    render() { 
    var nextIndex 
    return (
    <Navigator 
    initialRoute={{ title: 'My Initial Scene', index: 0 }} 
    renderScene={(route, navigator) => 
     <Navigation 
     title={route.title} 
     onForward={() => { 
      if(this.state.username) 
      nextIndex = route.index + 2 ; 
      else 
      nextIndex = route.index + 1 ; 
         navigator.push({ 
         title: 'Scene ' + nextIndex, 
         index: nextIndex, 
         }); 
        }} 
      onBack={() => { 
      if (route.index > 0) { 
      navigator.pop(); 
      } 
      }} 
      /> 
    } 
    /> 
); 

    } 
} 


AppRegistry.registerComponent('Example',() => Example); 

2. navigation.js

import React,{Component} from 'react'; 
import{ 
    StyleSheet, 
    Text, 
    Navigator, 
    TouchableHighlight, 
    View, 
} from 'react-native'; 
export default class Navigation extends Component{ 
    constructor(props) { 
    super(props) 
    } 
    render() { 
    return (
     <View> 
     <Text>Current Scene: {this.props.title}</Text> 
     <TouchableHighlight onPress={this.props.onForward}> 
        <Text>Tap me to load the next scene</Text> 
       </TouchableHighlight> 
     <TouchableHighlight onPress={this.props.onBack}> 
      <Text>Tap me to go back</Text> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 
} 

これはRN 0.40.0の実例です