react-navigation的超級大坑

歸去來兮-不如去兮發表於2018-11-24
ReactNavigation

本文針對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({})

終於使用成功了

相關文章