ReactNative 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 { 

    } 
}); 

На данный момент я просто написал навигацию прямо из документов. Но я бы хотел, чтобы он переходил на другой экран внутри операторов if при проверке пользователя Firebase. Таким образом, переход к одной сцене, если пользователь существует, и другая сцена, если нет. Я нахожу документацию этого очень плохого, поэтому я даже не могу составить основную идею о том, как изменить этот метод перехода (кажется, это бесконечные способы сделать это, вздох ..) в работу над моей ситуацией.

Answer 1

Вы можете определенно использовать приведенный ниже пример, это хмель на экраны на 2, если он нашел пользователя или хмель на экраны на 1.

Если предположить, что пользователь уже присутствует

1. index.android.js

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