ReactNative Navigation

Question

Ich habe große Schwierigkeiten bei der Implementierung eines Navigationssystems für meine ReactNative App. Hier ist der 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 { 

    } 
}); 

Im Moment habe ich einfach eine Navigation direkt aus der Dokumentation geschrieben. Aber ich möchte, dass es bei der Suche nach einem Firebase-Benutzer auf einen anderen Bildschirm innerhalb der if -Anweisungen übergeht. Also Übergang zu einer Szene wenn ein Benutzer existiert und eine andere Szene wenn nicht. Ich finde die Dokumentation dieser sehr Armen, so kann ich nicht einmal eine grundlegende Idee, wie diese Methode des Übergangs zu ändern (scheint endlose Wege, es zu tun, seufz ..) in die Arbeit zu meiner Situation zu bauen.

Answer 1

Sie auf jeden Fall das folgende Beispiel verwenden können, es hüpft auf Bildschirmen von 2, wenn er Benutzer gefunden oder hüpft auf Bildschirmen von 1.

Benutzer bereits vorhanden

1. index.android.js Unter der Annahme,

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> 
    ) 
    } 
} 

Dies ist das Arbeitsbeispiel für RN 0.40.0