react

本文针对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'}}>     x分之一 <text>detail screen</text>    </view>);const rootnavigator = stacknavigator({  home: {    screen: homescreen  },  detail: {    screen: detailscreen  }});export default rootnavigator;

上来就是报错

undefined is not a function (evaluating'_reactn公共选修课avigation.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. otherwi:

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

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

yarn add react-native-gesture-handlerreact-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 (      <v如何进入路由器iew 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 appconst styles = stylesheet.create({  con符号网名tainer: {    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({})

终于使用成功了