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

最新推荐文章于 2025-06-10 12:01:49 发布

J_小浩子

最新推荐文章于 2025-06-10 12:01:49 发布

阅读量3.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： react-native 文章标签： react-native 导航栏跳转页面

本文链接：https://blog.youkuaiyun.com/change_on/article/details/78503078

react-native 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在React Native中使用StackNavigator进行页面跳转时遇到的困难与解决过程，强调了版本一致性、文档错误、npm安装问题及export default的重要性。通过详细的步骤和教训，帮助开发者避免类似坑点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

弄了一天，终于跑起来了，可以说历经千辛万险！
最好的教程是React Navigation的官网：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 />;
  }
}

如果一切顺利，效果如下

这里写图片描述

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

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

这里写图片描述

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

这里写图片描述

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 的

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