必看系列之React-Native项目技巧

写在前面：最近在用react-native+mapbox开发一个APP，支持离线渲染影像、矢量数据（有想看的后面可以出一个相关的教程），第一次自己负责一个完整的RN项目，还是踩了不少坑的，尤其是调试，如果确信代码没问题，可就是展示不出你要的效果或者刷新没反应，那么就----杀掉APP后台试试 ，不行就卸载重装试试

我的项目中组件库主要是RN自己的和native-base

1、drawer组件，需要把页面包裹在抽屉标签之间。这样才能使抽屉浮在页面最上面。
用多了antd-design的抽屉组件，以为这个也是直接当成组件引用就可，发现并不是。

import {Drawer} from 'native-base';
import BaseMapDrawer  from './BaseMapDrawer'
import {   View, Text,  Button} from 'react-native';

<Drawer
  ref={(ref) => { this.drawer = ref }}
  content={<BaseMapDrawer />}  //抽屉中的内容
  onClose={() => this.closeDrawer()}
  openDrawerOffset={0.2}
  tapToClose={true}
  type={'overlay'}
>
  <View>
  	<Text>这里放的是页面主体</Text>
  	<Button onPress={this.openDrawer}><Text>打开抽屉</Text></Button>
  </View>
 </Drawer>

//打开抽屉
 openDrawer = () => {
    this.drawer._root.open()
 }

 // 关闭抽屉
 closeDrawer = () => {
     if (this.drawer) {
         this.drawer._root.close()
     }
 };

2、react-native-vector-icons无法识别，icon始终为X

1)、安装包、执行Link命令
npm install --save react-native-vector-icons // 下载库
react-native link react-native-vector-icons // 自动关联

安装成功后 android/app/src/main/assets/fonts下就有各种字体库文件

2)、 进入android/app/build.gradle文件，添加如下内容：

project.ext.vectoricons = [
iconFontNames: [ ‘MaterialIcons.ttf’, ‘EvilIcons.ttf’ ]
]
apply from: “…/…/node_modules/react-native-vector-icons/fonts.gradle”

3)、import Icon from ‘react-native-vector-icons/FontAwesome’;
<Icon name=‘angle-right’ size={24} color={’#999’} />

附：icon字典网站 ，可以查询所有icon的名称
如果按照以上步骤做了，icon还是显示不出来，就在Android Studio中重新打开一下该项目，并且卸载APP重装。

3、listen EADDRINUSE: address already in use :::8081.（端口被占用）
调试中命令窗口出现这个说明默认端口被占用了，可能是之前启动过项目，没有用命令关闭项目，就移除了设备（可能还有其他原因，反正就是奇奇怪怪啦）
解决方法：
1)、window+r 调出命令框，输入netstat -ano （查询机器端口占用情况）

2)、找到8081端口 输入 tskill 7260 （杀掉这个进程）
3)、重新启动项目即可

4、this.props.navigation.navigate(‘Index’) 路由跳转 但是页面没被卸载
(项目中的路由用的是 @react-navigation/native 和 @react-navigation/stack)
效果：当前页面跳到Index页面时候，要被卸载掉，这样重新跳回去时候，页面是重新加载的。但是用navigate不能实现这种（别问我为什么，我还没找到可以说服我的原因）。

解决：改成this.props.navigation.replace(‘Index’)

后面有新的‘坑’，继续更新…