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

您绝对可以使用下面的示例，如果他找到用户，它会跳到屏幕上，或者跳到屏幕上。

假设用户已经存在

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

这是RN0.40.0的工作示例。