本文针对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. Integer ==判断遇到的问题

      今天开发过程中,遇到 这样的一个问题 public class Test { public static void main(String[] args) { Integer aa = 12345 ...

  2. BufferedInputStream使用详解

    下面的例子演示如何使用BufferedInputStream类读取文本文件内容. 首先需要声明一个byte数组作为buffer,然后循环将文本内容循环读入到buffer中,并将buffer转换为字符串 ...

  3. Docker相关连接

    docker-compose文档:https://docs.docker.com/compose/compose-file/ dockerfile文档:https://docs.docker.com/ ...

  4. 快速设置UITableView不同section对应于不同种类的cell

    快速设置UITableView不同section对应于不同种类的cell 本文主要是为了写明如何在UITableView中,一个section对应于一种类型的cell,写起来不凌乱. 在不封装任何类的 ...

  5. Java实例---计算器实例

    1.计算器上的键的显示名字 1.0 继承JFrame类 public class Calculate extends JFrame { } 1.1定义常量 /** 计算器上的键的显示名字 */ pub ...

  6. Jquery 获取Checkbox值,prop 和 attr 函数区别

    总结: 版本 1.6 1.6 1.4 1.4 函数 勾选 取消勾选 勾选 取消勾选 attr('checked') checked undefined true false .prop('checke ...

  7. css3—产品列表之鼠标滑过效果

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title&g ...

  8. Java虚拟机13:Java类加载机制

    前言 我们知道我们写的程序经过编译后成为了.class文件,.class文件中描述了类的各种信息,最终都需要加载到虚拟机之后才能运行和使用.而虚拟机如何加载这些.class文件?.class文件的信息 ...

  9. 2018-2019-2 网络对抗技术 20165322 Exp5 MSF基础应用

    2018-2019-2 网络对抗技术 20165322 Exp5 MSF基础应用 目录 实验内容与步骤 一个主动攻击实践 MS08-067(失败) ms17_010_psexec(成功且唯一) 一个针 ...

  10. BZOJ1089:[SCOI2003]严格n元树(DP,高精度)

    Description 如果一棵树的所有非叶节点都恰好有n个儿子,那么我们称它为严格n元树.如果该树中最底层的节点深度为d (根的深度为0),那么我们称它为一棵深度为d的严格n元树.例如,深度为2的严 ...