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({})

终于使用成功了