(??)012_ReactNative: Navigators

(问渠那得清如许，为有源头活水来。 双手奉上RN官网)

Navigators: 多界面之间切换

• 关于Scenes场景概念(可以简单理解为一屏的展现)

①创建一个名为"MyScene.js"的新文件,并写入以下内容

import React, { Component, PropTypes } from 'react';
import { View, Text, TouchableHighlight } from 'react-native';

//export defaul 声明使得该组件可以被其他组件导入使用
export default class MyScene extends Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
    onForward: PropTypes.func.isRequired,
    onBack: PropTypes.func.isRequired,
  }
  render() {
    return (
      
        Current Scene: { this.props.title }
        
          Tap me to load the next scene
        
        
          Tap me to go back
        
      
    )
  }
}

②可以在index中引入

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

import MyScene from './MyScene';

class SimpleNavigationApp extends Component {
  render() {
    return (
      
           {    
              const nextIndex = route.index + 1;
              navigator.push({
                title: 'Scene ' + nextIndex,
                index: nextIndex,
              });
            }}

            // Function to call to go back to the previous scene
            onBack={() => {
              if (route.index > 0) {
                navigator.pop();
              }
            }}
          />
        }
      />
    )
  }
}

AppRegistry.registerComponent('ReactNativeLearn', () => SimpleNavigationApp);