本文共 2425 字，大约阅读时间需要 8 分钟。

// App.jsimport React, {Component} from 'react';import ChoosePage from './src/choosePage';type Props = {};export default class App extends Component
   
     {    render() {        return (            
            );    }}
   

// choosePage.jsimport React, {Component} from 'react';import page1 from './page1';import page2 from './page2';import {    StackNavigator} from 'react-navigation';export default class choosePage extends Component {    constructor(props) {        super(props);    }    render() {        return (            
           );    }}const MyNavigator = StackNavigator({    p1: {screen: page1},    p2: {screen: page2},}, {    initialRouteName: 'p1',});

// page1.jsimport React, {Component} from 'react';import {    Text,    View,    TouchableOpacity,    TextInput} from 'react-native';export default class page1 extends Component
   
     {    static navigationOptions = {    //上标题        title: '第一页',    };    constructor(props) {        super(props);        this.state = {text: ' '};    }    render() {        const {navigate} = this.props.navigation;        return (            
                    
     
       {                        this.setState({text})                    }}                    value={this.state.text}                />                
      
        {                        navigate('p2', {message: this.state.text});                    }}>                    
       
        点我去第二页！
                       
                  
     
            );    }}
   

// page2.jsimport React, {Component} from 'react';import {    Text,    View,    TouchableOpacity} from 'react-native';export default class page2 extends Component
   
     {    static navigationOptions = {    //上标题        title: '第二页',    };    render() {        const {params} = this.props.navigation.state;        return (            
                    
     
      欢迎来到第二页！
                     
     
      {'传来的参数是：' + params.message}
                     
     
       {                    this.props.navigation.goBack()                }}                >                    
      
                               点我返回                    
                      
                 
            );    }}
   

注意：界面跳转时需要在项目中输入npm install --save react-navigation或者yarn add react-navigation

如图：注意是在项目内的控制台输入。输入后才能正确只能提醒并使用（如果已经安装yarn，建议使用yarn add react-navigation   因为这个速度快）

若有疑问，敬请评论。

附：

规范化文件布局：

React native 纯页面跳转功能代码：

运行项目简易方法：

初次运行项目会遇到的问题解决方法：