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

前端之家收集整理的这篇文章主要介绍了react-native 使用 StackNavigator 导航器跳转页面前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

弄了一天,终于跑起来了,可以说历经千辛万险!
最好的教程是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>
    );
  }
}
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 的

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

猜你在找的React相关文章