写在前面:最近在用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’)
后面有新的‘坑’,继续更新…