效果如下：很簡單的例子，大佬勿噴啊...

          點選檢視多少錢後，自動跳轉到超市頁面，點選回答價格後，自動跳轉回顧客介面，並傳遞引數回去。

在我使用的0.57.0的版本中，Navigator已被移除，需要安裝：

npm install react-native-deprecated-custom-components --save

然後在使用的地方匯入：

import {Navigator} from 'react-native-deprecated-custom-components';

定義初始介面和一些設定(下面給出了程式碼，主要的地方都有註釋，沒什麼好說的。。。)

import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
import People from './res/demo1/people';
import {Navigator} from 'react-native-deprecated-custom-components';

export default class App extends Component<Props> {
  /*初始化state*/
  constructor(props){
      super(props);
      this.state={
        msg:'people',
      }
  }


  render() {
    return (
      <View style={styles.container}>
         <Navigator
             initialRoute={{
                 component:People  //首先顯示的介面
                }
             }
             renderScene={(route,navigator)=>{
                    let Component = route.component; //取出路由裡傳過來的元件  元件名要大寫
                    return <Component navigator={navigator} {...route.params} /> //navigator={navigator} 元件傳過去 {...route.params}  元件的延展屬性
                }
             }
         />
      </View>
    );
  }
}

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

定義prople.js

import React, {Component} from 'react';
import {StyleSheet, View,Text,Image} from 'react-native';
import Supermarket from './supermarket';

export default class people extends Component<Props> {
    /*初始化state*/
    constructor(props){
        super(props);
        this.state={
            msg:'',
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.myText}>我是顧客</Text>
                <Text style={styles.myText1}
                    onPress={()=>{
                        this.props.navigator.push({ //顯示下一個介面
                            component:Supermarket,
                            params:{
                                msg:'購買了一個冰淇淋',
                                onCallBack:(msg)=>{ //自定義的回撥函式，跟超市的橋樑，傳遞超市返回給顧客的資訊
                                    this.setState({
                                        msg:msg
                                    })
                                }
                            }//params end
                        })//push end
                    }}//onPress end
                >《我想購買一個冰淇淋，點選知道需要多少錢！》</Text>
                <Text style={styles.myText}>{this.state.msg}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
        justifyContent: 'center',
        alignItems: 'center'
    },
    myText:{
       fontSize:20,
    },
    myText1:{
       backgroundColor: '#f9ff2b'
    }
});
 

定義supermarket.js

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

export default class supermarket extends Component<Props> {
    /*初始化state*/
    constructor(props){
        super(props);
        this.state={

        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.myText}>我是超市</Text>
                <Text style={styles.myText}>顧客購買記錄：{this.props.msg}</Text>
                <Text style={styles.myText1}
                    onPress={()=>{
                        this.props.onCallBack('需要15元')
                        this.props.navigator.pop()  //關閉當前頁面
                       }
                    }
                >《點選回答顧客冰淇淋價格》</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
        justifyContent: 'center',//垂直居中
        alignItems: 'center' //水平居中
    },
    myText:{
        fontSize:20
    },
    myText1:{
        backgroundColor: '#f9ff2b'
    }
});