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 ...
随机推荐
- Appium+java移动端项目测试问题整理
一.每次打开APP都要重新安装.充值账号密码 解决:打开appium,设备,Use Browser ,勾选“No Reset” 二.一个页面包含相同文字,打开页面路径错误 问题描述:APP处于[ ...
- Maven 安装 eclispe
-Dmaven.multiModuleProjectDirectory=$M2_HOME
- 深入理解HashMap和concurrentHashMap
原文链接:https://segmentfault.com/a/1190000015726870 前言 Map 这样的 Key Value 在软件开发中是非常经典的结构,常用于在内存中存放数据. 本篇 ...
- 7.Java关键字和保留字
一.概念 Java关键字(Key Word): 对Java的编译器有特殊的意义,他们用来表示一种数据类型或者表示程序的结构. 保留字(Reserve Word):即它们在Java现有版本中没有特殊含 ...
- Oracle数据库从入门到精通-分组统计查询
视频课程:李兴华 Oracle从入门到精通 视频课程学习者:阳光罗诺 视频来源:51CTO学院 整体内容: 统计函数的使用 分组统计查询的实现 对分组的数据过滤 统计函数 在之前我们就学习过一个COU ...
- 性状、生成器、闭包、OPcache【Modern PHP】
目录 性状 Trait 生成器 闭包 Zend OPcache PHP发展这么多年,技术.架构都已经革新,了解现代PHP很重要,最近在看Model PHP这本书,系统的了解下PHP相关的概念. 性状 ...
- 5、Node.js 回调函数
内容:回调函数:阻塞/同步.非阻塞.和异步区别:阻塞和非阻塞代码实例 Node.js 回调函数Node.js 异步编程的直接体现就是回调.异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了. ...
- python异常处理及内置模块
异常处理 有时候我们在写程序的时候会出现错误或者异常,导致程序终止,如下这个例子: #!/usr/bin/env python a = 2/0 print(a) 结果提示如下错误: Traceback ...
- 利用TLE数据确定卫星轨道(1)-卫星轨道和TLE
1.卫星轨道 太空中卫星和天体在各种引力的作用下都在一定的轨道中周期转动着,但实际的轨道是很复杂的,一般的项目也达不到那么精确的需求(其实精确的卫星参数数据也不可能随便公开的),所以采用一阶近似的开普 ...
- ALICE源代码分析
前言 ALICE(爱丽丝)事实上是"人工语言计算机实体"的英文缩写. 它以前在往年(2000年.2001年和2004年)的勒布纳人工智能奖角逐中三次获胜.并在其它年度中也获过骄人的 ...