React-Native 简单界面跳转

1.新建工程 react-native init demo
(1) 打开demo目录下 cd C:\Users\Administrator\demo
运行 react-native start
由于是Windows环境，运行Android工程

(2)在当前目录下新建 first.js 文件

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Navgator,
  TouchableOpacity
} from 'react-native';

import SecondPage from './second';

export default class FirstPage extends Component {

  _openPage() {
      this.props.navigator.push({
      component: SecondPage,
      })
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this._openPage.bind(this)}>
         <Text style={styles.welcome}>
            这是第一页，点击跳到第二页       
         </Text>
       </TouchableOpacity>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color:'red',
  },
});

(3)修改index.android.js 文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

import FirstPage from './first.js';

const defaultRoute = {
  component: FirstPage,
};

class demo extends Component {
  _renderScene(route, navigator) {
    let Component = route.component;
    return (
      <Component {...route.params} navigator={navigator} />
    );
  }
  render() {
    return (
      <Navigator
        initialRoute={defaultRoute}
        renderScene={this._renderScene}
        />
    );
  }
}
AppRegistry.registerComponent('demo', () => demo);

运行效果如下：

(3)新增 second.js 文件

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Navgator,
  TouchableOpacity
} from 'react-native';

export default class SecondPage extends Component {

  _openPage() {
      this.props.navigator.pop()
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this._openPage.bind(this)}>
         <Text style={styles.welcome}>
            回到第一页
         </Text>
       </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color:'red',
  },
});

重新加载文件：