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语句中的另一个屏幕。如果用户存在则转换到一个场景，否则转换到另一个场景。我找到了这个非常差的文档，所以我甚至无法建立一个基本的想法，即如何修改这种转换方法（似乎是无休止的方式，感叹......）以适应我的情况。 / p>

Answer 1

你绝对可以使用下面的例子，如果他在屏幕上发现用户或跳数为1，它会跳到屏幕2上。

假设用户已经出现

<强> 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的工作示例

ReactNative导航

1 个答案: