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版本,最後直接去看英文文檔!!

react-navigation英文文檔

文檔上有一句

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

終於使用成功了