Question

我是新来的本地人。

我使用的是NavigatorIOS，但它太有限了，所以我试图使用Navigator。在NavigatorIOS中，我可以通过调用this.props.navigator.push()来更改视图，但它在Navigator中不起作用，它的结构似乎不同。如何使用Navigator更改视图？

Answer 1

这是最小的工作导航器 - 它可以做得更多（见最后）：

你需要你的主要＆＃34;导航器＆＃34;视图以渲染导航器组件
在导航器中，您需要指定如何为不同路线渲染场景（renderScene属性）
在此＆＃34; renderScene＆＃34;您应该根据正在渲染的路线渲染视图（场景）。 Route是一个简单的javascript对象，按照惯例，场景可以通过＆＃34; id＆＃34;路线参数。为了清楚和分离关注点，我通常将每个场景定义为单独的命名组件，并使用该组件的名称作为＆＃34; id＆＃34;，尽管它只是一个约定。它可以是任何东西（例如场景编号）。确保将navigator作为属性传递给renderScene中的所有视图，以便您可以进一步导航（参见下面的示例）
当您想要切换到另一个视图时，您实际上是推送或替换该视图的路径，导航器负责将该路线渲染为场景并正确动画场景（尽管动画集非常有限） - 您可以控制一般动画方案，但每个场景的动画都不同（参见官方文档的一些例子）。导航器保持路由的堆栈（或更确切地说是阵列），以便您可以在堆栈中已经存在的位置之间自由移动（通过推送新的，弹出，替换等）。

＆＃34;导航＆＃34;视图：

render: function() {
<Navigator style={styles.navigator}
      renderScene={(route, nav) =>
        {return this.renderScene(route, nav)}}
/>
},

renderScene: function(route,nav) {
   switch (route.id) {
      case "SomeComponent":
        return <SomeComponent navigator={nav} />
      case "SomeOtherComponent:
        return <SomeOtherComponent navigator={nav} />
   }
}

SomeComponent：

onSomethingClicked: function() {
   // this will push the new component on top of me (you can go back)
   this.props.navigator.push({id: "SomeOtherComponent"});
}


onSomethingOtherClicked: function() {
   // this will replace myself with the other component (no going back)
   this.props.navigator.replace({id: "SomeOtherComponent"});
}

此处更多详细信息https://facebook.github.io/react-native/docs/navigator.html您可以在示例项目中找到很多示例，这些示例是react-native的一部分：https://github.com/facebook/react-native/tree/master/Examples/UIExplorer

Answer 2

我发现在展示导航器的工作原理时，Facebook的例子要么是简单的要么是复杂的。基于@ jarek-potiuk示例，我创建了一个简单的应用程序，可以来回切换屏幕。

在此示例中，我使用的是：react-native: 0.36.1

<强> index.android.js

import React, { Component } from 'react';
import { AppRegistry, Navigator } from 'react-native';

import Apple from './app/Apple';
import Orange from './app/Orange'

class wyse extends Component {
  render() {
    return (
      <Navigator
        initialRoute={{screen: 'Apple'}}
        renderScene={(route, nav) => {return this.renderScene(route, nav)}}
      />
    )
  }

  renderScene(route,nav) {
    switch (route.screen) {
      case "Apple":
        return <Apple navigator={nav} />
      case "Orange":
        return <Orange navigator={nav} />
      }
  }
}

AppRegistry.registerComponent('wyse', () => wyse);

应用/ Apple.js

import React, { Component } from 'react'; import { View, Text, TouchableHighlight } from 'react-native'; export default class Apple extends Component { render() { return ( <View> <Text>Apple</Text> <TouchableHighlight onPress={this.goOrange.bind(this)}> <Text>Go to Orange</Text> </TouchableHighlight> </View> ) } goOrange() { console.log("go to orange"); this.props.navigator.push({ screen: 'Orange' }); } }

应用/ Orange.js

import React, { Component, PropTypes } from 'react'; import { View, Text, TouchableHighlight } from 'react-native'; export default class Orange extends Component { render() { return ( <View> <Text>Orange</Text> <TouchableHighlight onPress={this.goApple.bind(this)}> <Text>Go to Apple</Text> </TouchableHighlight> </View> ) } goApple() { console.log("go to apple"); this.props.navigator.push({ screen: 'Apple' }); } }

Answer 3

我遇到了同样的麻烦，无法找到一个很好的导航示例。我希望能够控制视图以转到新屏幕，但也能够返回上一屏幕。

我使用Andrew Wei的上述答案并创建了一个新应用程序，然后复制了他的代码。这很有效，但.push将继续创建新的图层（ Apple＆gt; Orange＆gt; Apple＆gt; Orange＆gt; Apple＆gt; Orange 等）。因此，我在.pop下的Orange.js文件中使用goApple()而不是.push。

这类似于＆＃34; 返回＆＃34;按钮现在，这是我正在寻找的，同时教导如何导航到其他页面。

在React Native中更改Navigator中的视图

3 个答案: