navigation html5,react-navigation的超级大坑

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

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

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

首先我按网上的例子来

import {stacknavigator} from 'react-navigation';

const homescreen = () => (

home screen

);

const detailscreen = () => (

detail screen

);

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 (

home screen

);

}

}

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 (

2

)

}

}

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 (

one

this.props.navigation.navigate('profile')} />

)

}

}

const styles = stylesheet.create({})

终于使用成功了