首先進入到項目的跟路徑然后加載 react-navigation 第三方庫 如圖

6B4AEE6E-435E-4C54-B70E-C87235FAF6D9.png

代碼中引入StackNavigator組件

5CF902D1-9639-494D-8775-A9A87F376734.png

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import {
  StackNavigator,
} from 'react-navigation';
import DetailVC from './DetailVC';
import MainVC from './MainVC';
// StackNavigator配置，默認顯示MianVC頁面
const MyNavigatior = StackNavigator(
  {
    MainVC: {screen: MainVC },
    DetailVC: {screen: DetailVC},
  },
  {
    initialRouteName: 'MainVC',//默認路由，就是第一個要顯示的頁面
  }
);


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

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

然后看MainVC.js首頁實現代碼

mport React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
export default class MainVC extends Component {
  static navigationOptions = {
    title: '首頁'//對頁面的配置
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <TouchableOpacity style={{height:60,backgroundColor:'orange',justifyContent: 'center',}}
                          onPress={() => navigate('DetailVC', { title: '詳情',des:'我是返回點擊我' })} >
           <Text>點擊進詳情頁</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

在看DetailVC.js首頁實現代碼

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

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
export default class DetailVC extends Component {
  //接收上一個頁面?zhèn)鬟^來的title顯示出來
  static navigationOptions = ({ navigation }) => ({
    title: navigation.state.params.title
  });
  // 點擊返回上一頁方法
  backVC=()=>{
    //返回首頁方法
    this.props.navigation.goBack();
  }
  render() {
    const { navigate } = this.props.navigation;
    return (
        <View style={styles.container}>
          <TouchableOpacity style={{
                                    height:40,
                                    backgroundColor:'green',
                                    justifyContent: 'center'}}
                            onPress={() =>{this.backVC()}}>
             <Text>{this.props.navigation.state.params.des}</Text>
          </TouchableOpacity>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

最看看一下實現的效果圖
iOS

QQ20170818-115330-HD.gif

Android

QQ20170818-115425-HD.gif