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