react-native 使用 StackNavigator 导航器跳转页面

电玩女神 2022-06-06 14:12 308阅读 0赞

弄了一天，终于跑起来了，可以说历经千辛万险！  
最好的教程是React Navigation的官网：[https://reactnavigation.org/][https_reactnavigation.org]

**StackNavigator 的原理：StackNavigator 是一个移动的“卡片堆栈”，每一个新屏幕都放在堆栈的顶部，删除一个屏幕是将它从堆栈的顶部移出。**

**以window平台的android环境为例（react-native 版本是0.5），新建一个SimpleApp的react-native项目，导入 react-navigation**

# 创建一个新的 React Native 应用
    react-native init SimpleApp
    cd SimpleApp
    
    # 从npm安装最新版本的react-navigation
    npm install --save react-navigation
    
    # 这一步可以忽略，在window平台上，npm安装新的模块，下面运行项目的run-abdroid会失效，通过npm install刷新下
    npm install
    
    # 运行android环境
    react-native run-android

**等待几分钟项目初始化后，导进vscode，将App.js文件清空**

*  **导入组件**

import React from 'react';
    import { AppRegistry, StyleSheet, Text, View, Button } from 'react-native';
    import { StackNavigator } from 'react-navigation';

*  **加入两个屏幕HomeScreen 和ChatScreen**

//ChatScreen 屏幕
    class ChatScreen extends React.Component { 
      // 导航栏的选项可以被定义为屏幕属性的函数
      static navigationOptions = ({ navigation }) => ({
        //${navigation.state.params.user} 是一个动态的参数，参数名为user
        title: `Chat with ${navigation.state.params.user}`,
      });
      render() {
        //屏幕当前的路由通过屏幕属性的状态传递
        const { params } = this.props.navigation.state;
        return (
          <View>
           //params 是参数的意思，params.user表示参数user的值
            <Text>Chat with {params.user}</Text>
          </View>
        );
      }
    }
    
    //HomeScreen 屏幕
    class HomeScreen extends React.Component { 
     //导航栏写成固定的Welcome
      static navigationOptions = {
        title: 'Welcome',
      };
      render() {
        const { navigate } = this.props.navigation;
        return (
          <View>
            <Text>Hello, Chat App!</Text>
            //定义按钮组件，增加点击事件，把user: 'Lucy'传给Chat导航栏
            <Button
              onPress={() => navigate('Chat', { user: 'Lucy' })}
              title="Chat with Lucy"
            />
          </View>
        );
      }
    }

*  **定义StackNavigator 的屏幕，添加一下代码**

export const SimpleApp = StackNavigator({
      Home: { screen: HomeScreen },
      Chat: { screen: ChatScreen },
    });

*  最后不要忘了导出react组件

export default class App extends React.Component { 
      render() {
        return <SimpleApp />;
      }
    }

*  **如果一切顺利，效果如下**

![这里写图片描述][SouthEast]

![这里写图片描述][SouthEast 1]

## **就这么简单，20分钟都不用。可是我弄了一天，踩了很多坑** ##

*  **react-native版本和文档版本不一致，这是我的react-native**

![这里写图片描述][SouthEast 2]

**这是react-native中文网文档的版本，我当时没在意，一直用0.37， 错了好久，一定要选版本一致的**

![这里写图片描述][SouthEast 3]

*  **react-native中文网导航器的demo代码有问题，就算我的代码全copy的，还是中国红的一片，报错的忘了，没截图**
 *  **执行完npm install –save react-navigation后，react-native run-android时，报错**

Command 'run-android' unrecognized. Make sure...

**解决办法是关掉cmd窗口，再打开，cd到项目目录下，npm install 一遍，就可以react-native run-android**

*  **export default class App extends React.Component \{\} 这里要加 export default，因为App.js 是被index.js 多引用的，一定要export 出去，官网的教程是没加export default 的**

**其它的坑忘了截图，总之，运行成功一次来之不易，下班！**

[https_reactnavigation.org]: https://reactnavigation.org/
[SouthEast]: /images/20220606/568a43eb8012403ba8b5c1e30a0cdb0c.png
[SouthEast 1]: /images/20220606/ef02a4165e2b415788c85a7d47de8925.png
[SouthEast 2]: /images/20220606/82602911484742ad89c9163a759ec154.png
[SouthEast 3]: /images/20220606/7cab1b8353c8413c84cc7fe005710a23.png