一、前提知识点
- RN中文网链接 https://www.react-native.cn/docs/getting-started
- html、JavaScript、css基础
- es6+等新的概念
- react、redux相关知识
- 如果需要用ts语法,还需要了解typescript相关知识点
- 数据请求,官方中有推荐的,我这里选择axios
二、开发前后相关的一些配置
react-native相关知识点可以参考官方文档进行学习,总结了几点基本的
- RN开发需要的环境(mac,windows),参考官方文档即可
- RN开发利用相关脚手架初始化项目,参考官方文档即可
- RN打包需要用的签名创建,及打包流程,参考官方文档即可
- RN开发过程中用到的模拟器(我这里用的mumu模拟器)
- RN开发过程中用到的debugger工具(推荐使用react-native-debugger)
三、开发项目中用到的知识
学习的时候,我这里主要从以下几方面进行学习的,列出的大部分是npm包名
- 设置app启动图片
react-native-splash-screen
- 页面跳转 react-navigation 起到路由的作用
- 数据存储
@react-native-async-storage/async-storage
- 嵌入web
react-native-webview
- 使用相机
react-native-camera
- 扫描二维码
react-native-qrcode-scanner
- 文件上传
react-native-document-picker
react-native-doc-viewer
- 图片上传
react-native-image-picker
- 轮播图
react-native-swiper
- 背景渐变
react-native-linear-gradient
- 顶部状态栏
react-native
提供的组件StatusBar
- toast提示
react-native-root-toast
,会用到react-native-root-siblings
- 手势
react-native-gesture-handler
- 高德地图
react-native-amap3d
四、ui库
五、项目搭建
官网中提供的初始化模板
npx react-native init projectName --template react-native-template-typescript
六、根据需要安装对应依赖
建议加上npm进行依赖搜索,或者去npm官网搜索,eg: react-native-camera npm
因为我这里项目初始化的rn版本为0.63.4,所以大部分依赖都是直接link之后就可以正常使用的。
七、开发和调试
静态页面的开发其实跟web端一样,组件的合理利用就行。会涉及一些交互
- 物理返回键
const handle = ()=>{
// 响应事件处理
}
// 订阅
BackHandler.addEventListener('hardwareBackPress', handle);
// 移除
BackHandler.removeEventListener('hardwareBackPress', handle);
- 跨页面通信
const handle = (params)=>{
// 响应事件处理
}
// 订阅
DeviceEventEmitter.addListener('eventKey', handle);
// 移除
DeviceEventEmitter.removeListener('eventKey', handle);
// 触发
DeviceEventEmitter.emit('eventKey', params);
- formData文件上传
图片或者文件上传的时候,需要关闭debugger模式,不然会出现异常。