本文针对react-navigation^3.0.0版本,版本不对的话,请不要看本文,直接看官方英文文档

​ 最近一直在学习RN,没找到什么好的视频,所以一直看文档,一路上来虽然遇到一些乱七八糟的bug,但是能比较友好的解决掉

直到我使用react-navigation,这个官方文档上说简单易用的导航组件,搞的我心态爆照,调试了一下午

首先我按网上的例子来

import {StackNavigator} from 'react-navigation';
const HomeScreen = () => (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Home Screen</Text>
</View>
); const DetailScreen = () => (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Detail Screen</Text>
</View>
); const RootNavigator = StackNavigator({
Home: {
screen: HomeScreen
},
Detail: {
screen: DetailScreen
}
}); export default RootNavigator;

上来就是报错

undefined is not a function (evaluating'_reactNavigation.StackNavigator....')

我一看,这说我导入的不是函数????

查看道路部分,发现新的文档,方法名字都变了???

import {
createStackNavigator,
} from 'react-navigation'; const App = createStackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
}); export default App;

重启

依旧报错

React Native - undefined is not an object(evaluating 'RNGestureHandlerModule.state')

在这里google查了半天,都没有看到解决方案

因为一直这看中文文档,狗中文文档根本就不是3.0.0版本,最后直接去看英文文档!!

react-navigation英文文档

文档上有一句

Next, install react-native-gesture-handler. If you’re using Expo you don’t need to do anything here, it’s included in the SDK. Otherwise:

接下来,安装react-native-gesture-handler。 如果你正在使用Expo,你不需要在这里做任何事情,它包含在SDK中。 除此以外

// 我完全不知道Expo指什么,但是我还是跑了他下面的命令

yarn add react-native-gesture-handler
react-native link

我们看看官方的demo

import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation"; class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
</View>
);
}
} const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen
}
}); export default createAppContainer(AppNavigator);

这demo怎么和我看过的都不一样???

于是我改动了写的代码

App.js

import React, { Component } from 'react'
import { Platform, StyleSheet, Text, View } from 'react-native'
import { createStackNavigator, createAppContainer } from 'react-navigation'
import HomeScreen from './pages/HomeScreen'
import ProfileScreen from './pages/ProfileScreen' const navigator = createStackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen }
}) const App = createAppContainer(navigator) export default App const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5
}
})

pages/ProfileScreen

import React, { Component } from 'react'
import { Text, StyleSheet, View } from 'react-native' export default class ProfileScreen extends Component {
static navigationOptions = {
title: 'ProfileScreen'
}
render() {
return (
<View>
<Text> 2 </Text>
</View>
)
}
} const styles = StyleSheet.create({})

pages/HomeScreen

import React, { Component } from 'react'
import { Text, StyleSheet, View, Button } from 'react-native'
import { createStackNavigator, createAppContainer } from 'react-navigation';
export default class HomeScreen extends Component {
static navigationOptions = {
title: 'HomeScreen'
}
render() {
return (
<View>
<Text> one </Text>
<Button title="go to two" onPress={() => this.props.navigation.navigate('Profile')} />
</View>
)
}
} const styles = StyleSheet.create({})

终于使用成功了

react-navigation的超级大坑的更多相关文章

  1. react-native 学习 ----- React Navigation

    很久没有的登陆博客园了,密码都是找回的,从当年的大学生已经正常的走上了程序员的道路,看到之前发的博客还是写的android,现在自己已经在使用了react-native了. 大学毕业了,做了java后 ...

  2. react-native导航器 react navigation 介绍

    开发环境搭建好之后,想要进一步了解react-native,可以先从react-native官网上的电影列表案例入手: https://reactnative.cn/docs/0.51/sample- ...

  3. React Navigation & React Native & React Native Navigation

    React Navigation & React Native & React Native Navigation React Navigation https://facebook. ...

  4. [RN] 04 - React Navigation

    react-navigation和react-router的对比: 支持的平台: react-navigation: react-native react-router: react-native.r ...

  5. React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方

    以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation  react-native ...

  6. React-native 导航插件React Navigation 4.x的使用

    React-native 导航插件React Navigation 4.x的使用 文档 英文水平可以的话,建议直接阅读英文文档 简单使用介绍 安装插件 yarn add react-navigatio ...

  7. [RN] React Navigation 使用中遇到的显示 问题 汇总

    React Navigation 使用中遇到的显示 问题 汇总 https://www.jianshu.com/p/8b1f18affc5d

  8. react navigation goBack()返回到任意页面(不集成redux) 一

    方案一: 一.适用场景:在app端开发的时候,相反回到某一个页面的时候保持跳转页面的所有状态不更新,也就是说不触发新的生命周期. 例如:A——>B——>C——>D 要想从D页面直接返 ...

  9. React Navigation / React Native Navigation 多种类型的导航结合使用,构造合理回退栈

    React Navigation 更新到版本5已经是非常完善的一套导航管理组件, 提供了Stack , Tab , Drawer 导航方式 , 那么我们应该怎样设计和组合应用他们来构建一个完美的回退栈 ...

  10. React Navigation基本用法

    /** * Created by apple on 2018/9/23. */ import React, { Component } from 'react'; import {AppRegistr ...

随机推荐

  1. vue知识day1

    HTML语义.CSS:样式 js:行为 jQuery:简化了js操作 boostrap :框架 ,以类方式展现 react:facebook 公司的产品 angular:谷歌公司产品 vue:作者尤雨 ...

  2. python笔记8-多线程threading之封装式

    执行函数 1.先写一个执行函数,用来实现做某件事情,不同的人吃火锅用一个参数people代替. # coding=utf-8 import threading import time def chiH ...

  3. Python学习---装饰器的学习1210

    装饰器的基础 学习前提: 作用域 + 函数的理解 + 闭包  [学习,理解] 代码编写原则: 对修改开放对扩展开放 装饰器本质上是一个函数,该函数用来处理其他函数,它可以让其他函数在不需要修改代码的前 ...

  4. 11、Node.js 函数

    内容:普通函数,匿名函数,函数传递是如何让HTTP服务器工作的 ###普通函数例子: function say(word) { console.log(word); } function execut ...

  5. 打包工具的核心原理(转自:https://juejin.im/entry/5b223ebd518825748b569bda)

    打包工具就是负责把一些分散的小模块,按照一定的规则整合成一个大模块的工具.与此同时,打包工具也会处理好模块之间的依赖关系,最终这个大模块将可以被运行在合适的平台中. 打包工具会从一个入口文件开始,分析 ...

  6. Monkeyrunner测试环境搭建

    Monkey手机APP压力测试,是对手机发送伪随机命令,对手机进行按键,触摸等操作,MonkeyRunner是对其发送重复操作的命令,是Monkey的进阶版,可以设置重复的操作或者是重现步骤等.相比较 ...

  7. 【转】Maven项目模板

    http://www.yiibai.com/maven/maven_project_templates.html maven 使用 Archetype 概念为用户提供不同类型的项目模板,它是一个非常大 ...

  8. 【Git】将项目下的.git目录隐藏

    将项目下的.git目录隐藏 在apache配置文件httpd.conf中添加配置: <Directory "${INSTALL_DIR}/www/mypro/.git"> ...

  9. SpringBoot+MyBatis中自动根据@Table注解和@Column注解生成ResultMap

    其实我一点都不想用mybatis,好多地方得自己写,比如这里. 使用mybatis要写大量的xml,烦的一批.最烦人的莫过于写各种resultmap,就是数据库字段和实体属性做映射.我认为这里应该是m ...

  10. CDN的作用与基本过程

     转载请注明出处: leehao.me 或 https://blog.csdn.net/lihao21/article/details/52808747 简介 CDN,Content Distribu ...