react-navigation的超级大坑
本文针对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版本,最后直接去看英文文档!!
文档上有一句
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的超级大坑的更多相关文章
- react-native 学习 ----- React Navigation
很久没有的登陆博客园了,密码都是找回的,从当年的大学生已经正常的走上了程序员的道路,看到之前发的博客还是写的android,现在自己已经在使用了react-native了. 大学毕业了,做了java后 ...
- react-native导航器 react navigation 介绍
开发环境搭建好之后,想要进一步了解react-native,可以先从react-native官网上的电影列表案例入手: https://reactnative.cn/docs/0.51/sample- ...
- React Navigation & React Native & React Native Navigation
React Navigation & React Native & React Native Navigation React Navigation https://facebook. ...
- [RN] 04 - React Navigation
react-navigation和react-router的对比: 支持的平台: react-navigation: react-native react-router: react-native.r ...
- React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方
以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation react-native ...
- React-native 导航插件React Navigation 4.x的使用
React-native 导航插件React Navigation 4.x的使用 文档 英文水平可以的话,建议直接阅读英文文档 简单使用介绍 安装插件 yarn add react-navigatio ...
- [RN] React Navigation 使用中遇到的显示 问题 汇总
React Navigation 使用中遇到的显示 问题 汇总 https://www.jianshu.com/p/8b1f18affc5d
- react navigation goBack()返回到任意页面(不集成redux) 一
方案一: 一.适用场景:在app端开发的时候,相反回到某一个页面的时候保持跳转页面的所有状态不更新,也就是说不触发新的生命周期. 例如:A——>B——>C——>D 要想从D页面直接返 ...
- React Navigation / React Native Navigation 多种类型的导航结合使用,构造合理回退栈
React Navigation 更新到版本5已经是非常完善的一套导航管理组件, 提供了Stack , Tab , Drawer 导航方式 , 那么我们应该怎样设计和组合应用他们来构建一个完美的回退栈 ...
- React Navigation基本用法
/** * Created by apple on 2018/9/23. */ import React, { Component } from 'react'; import {AppRegistr ...
随机推荐
- vue知识day1
HTML语义.CSS:样式 js:行为 jQuery:简化了js操作 boostrap :框架 ,以类方式展现 react:facebook 公司的产品 angular:谷歌公司产品 vue:作者尤雨 ...
- python笔记8-多线程threading之封装式
执行函数 1.先写一个执行函数,用来实现做某件事情,不同的人吃火锅用一个参数people代替. # coding=utf-8 import threading import time def chiH ...
- Python学习---装饰器的学习1210
装饰器的基础 学习前提: 作用域 + 函数的理解 + 闭包 [学习,理解] 代码编写原则: 对修改开放对扩展开放 装饰器本质上是一个函数,该函数用来处理其他函数,它可以让其他函数在不需要修改代码的前 ...
- 11、Node.js 函数
内容:普通函数,匿名函数,函数传递是如何让HTTP服务器工作的 ###普通函数例子: function say(word) { console.log(word); } function execut ...
- 打包工具的核心原理(转自:https://juejin.im/entry/5b223ebd518825748b569bda)
打包工具就是负责把一些分散的小模块,按照一定的规则整合成一个大模块的工具.与此同时,打包工具也会处理好模块之间的依赖关系,最终这个大模块将可以被运行在合适的平台中. 打包工具会从一个入口文件开始,分析 ...
- Monkeyrunner测试环境搭建
Monkey手机APP压力测试,是对手机发送伪随机命令,对手机进行按键,触摸等操作,MonkeyRunner是对其发送重复操作的命令,是Monkey的进阶版,可以设置重复的操作或者是重现步骤等.相比较 ...
- 【转】Maven项目模板
http://www.yiibai.com/maven/maven_project_templates.html maven 使用 Archetype 概念为用户提供不同类型的项目模板,它是一个非常大 ...
- 【Git】将项目下的.git目录隐藏
将项目下的.git目录隐藏 在apache配置文件httpd.conf中添加配置: <Directory "${INSTALL_DIR}/www/mypro/.git"> ...
- SpringBoot+MyBatis中自动根据@Table注解和@Column注解生成ResultMap
其实我一点都不想用mybatis,好多地方得自己写,比如这里. 使用mybatis要写大量的xml,烦的一批.最烦人的莫过于写各种resultmap,就是数据库字段和实体属性做映射.我认为这里应该是m ...
- CDN的作用与基本过程
转载请注明出处: leehao.me 或 https://blog.csdn.net/lihao21/article/details/52808747 简介 CDN,Content Distribu ...