反应本机导航

Question

我在为我的 ReactNative 应用程序实现导航系统时遇到了很多麻烦。以下是索引.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. 索引.安卓.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.导航.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 的工作示例