ReactNative导航

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语句中的另一个屏幕。因此，如果用户存在，则转换到一个场景，否则转换到另一个场景。 我发现这个文档很糟糕，所以我甚至无法建立一个如何修改这种过渡方法的基本思路（似乎是无尽的方式，叹息......），以适应我的情况。

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