RN之react-navigation路由器使用的巨坑

react-navigation的使用的巨坑

这个库安装到成功使用搞了大半天，弄得心态崩溃。主要是不好意思问别人这么基础的问题，只能自己一点点趟坑，不过搞定之后信心暴涨啊。这位兄台好像和我一样，哈哈，遇到同道中人了。

安装命令

npm install react-navigation --save

运行命令之后会自动安装最新的版本，现在安装的是：

"react-navigation": "^3.6.1"

注意这个版本，如果是高版本使用低版本的写法，会报函数错误，如：

undefined is not a function (evaluating'_reactNavigation.StackNavigator....')

如果你觉得你安装版本错误了，可以卸载重新安装：

npm uninstall react-navigation --save

重新安装的时候可以指定版本安装。

网上很多都是1.+的版本，使用方式是：

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;

如果你导入的是2.+或者3.+的包，然后使用这种方式就会报上面的错误。正确的写法请参考官方文档，3.+的写法如下：

import React, { Component } from 'react'
import { View, Button, Platform, 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>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}


class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
          title="Go to Details... again"
          onPress={() => this.props.navigation.navigate('Home')}
        />
      </View>
    );
  }
}


const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  Details: {
    screen: DetailsScreen
  }
});

export default createAppContainer(AppNavigator);

直接运行之后会报错，在node窗口提示无法加载'react-native-gesture-handler'模块，所以需要安装手势库：

npm install --save react-native-gesture-handler

安装之后再链接（link）一下，不这样做在android中是导入不进去这个手势包：

react-native link react-native-gesture-handler

关闭node，重启node服务器，再次运行仍然报错：

null is not an object(evaluating 'RNGestureHandlerModule.Direction')

这个地方有时候不会报这个错误，他有时候报的错误是这样(卧了个槽)：

Module RCTNativeAppEventEmitter is not a registered callable module

或者是

Module RCTeventemitter is not a registered callable module

意思是RCTeventemitter不是一个可以注册的模块，完全搞不懂啥意思，google了好久资料，一头雾水，都是和这个库使用没啥关系的回答，后来没办法，就在手机上卸载了原程序，重启模拟器，重启项目，重启node服务器。重启完成后，再次react-native run-android，终于成功的报错：

null is not an object(evaluating 'RNGestureHandlerModule.Direction')

所以，有些奇怪的错误，重启一下就好了，还有卸载原apk，可能是js文件报错之后有缓存文件未清除干净（猜的）。

这时候查看官方文档 还需要在MainActivity文件中加入代码进行手动导入进行覆盖负责创建ReactRootView实例的方法，然后使用此库提供的根视图包装器。（不确定对解决这个bug有没有用，写完之后能运行成功，运行成功之后再关闭这些代码也能运行成功）：

//导入的包  
 import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

//方法
  @Override
 protected ReactActivityDelegate createReactActivityDelegate() {
   return new ReactActivityDelegate(this, getMainComponentName()) {
     @Override
     protected ReactRootView createRootView() {
         return new RNGestureHandlerEnabledRootView(MainActivity.this);
     }
    };
  }

运行成功，把该代码隐藏后运行，继续运行，没有报开始的错误，奇了个葩。