React native 本地导航

我在为我的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 {

  }
});

类测试扩展组件{
render（）{
常数路由=[
{title:'LoginScreen'，索引：0}，
{标题：'RegisterScreen'，索引：1}，
];
返回(
{
navigator.push（路径[1]）；
}}>
你好{route.title}！
}
样式={{padding:100}
/>
)
}
}
firebase.auth（）.onAuthStateChanged（函数（用户）{
如果（用户）{
}否则{
}
});

目前，我只是直接从文档中编写了一个导航。但在检查Firebase用户时，我希望它转换到if语句中的另一个屏幕。因此，如果用户存在，则转换到一个场景，如果不存在，则转换到另一个场景。

---

我发现这方面的文档非常糟糕，所以我甚至无法建立一个基本的想法，如何将这种转换方法（似乎是无止境的转换方法，叹气……）修改为适合我的情况。

你肯定可以使用下面的示例，如果他找到用户，它会在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);

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

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
滚动视图，
领航员，
看法
}从“反应本机”；
从“./Navigation”导入导航
导出默认类示例扩展组件{
构造函数（）{
超级（）；
这个州={
用户名：“ABC”，
}
}
render（）{
var nextIndex
返回(
{
if（this.state.username）
nextIndex=route.index+2；
其他的
nextIndex=route.index+1；
导航器。推({
标题：“场景”+nextIndex，
索引：nextIndex，
});
}}
onBack={（）=>{
如果（route.index>0）{
navigator.pop（）；
}
}}
/>
}
/>
);
}
}
AppRegistry.registerComponent（'示例'，（）=>示例）；

2。navigation.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);

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

import React，{Component}来自'React'；
进口{
样式表，
文本，
领航员，
触控高光，
看法
}从“反应本机”；
导出默认类导航扩展组件{
建造师（道具）{
超级（道具）
}
render（）{
返回(
当前场景：{this.props.title}
轻触我以加载下一个场景
轻拍我回去
)
}
}

---

这是RN 0.40.0的工作示例

回答得很好，但由于版本已更改。我正在尝试使用

react导航

模块实现导航，该模块工作正常。我已在我的应用程序中设置了选项卡式导航。但我想知道如何链接我的按钮来导航到另一个屏幕，而这个屏幕不在我定义的选项卡式导航列表中？e、 g.添加、编辑、搜索按钮，以切换到其他屏幕。