在React Native中更改Navigator中的视图

Question

我是新来的本地人.

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

Answer 1

这是最小的工作导航器 - 它可以做得更多(见最后):

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

"导航器"查看:

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,您可以在Samples项目中找到很多示例,它们是react-native的一部分:https://github.com/facebook /反应天然/树/主/实施例/ UIExplorer

Answer 2

我发现在展示Navigator的工作原理时,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' });
  }
}