《第一篇:最全React技术栈技术资料汇总》
《第二篇:最全ReactNative技术资料汇总》 本篇
《第三篇:最全React架构设计与性能优化汇总》
《第四篇:最全ReactNative架构设计与性能优化汇总》
目录
显示
社区资料
- 官网文档-ReactNative
- 中文翻译-ReactNative
- ReactNative每日一学 作为一个React Native的爱好者,从零开始,将React Naive学习实践过程中总结的经验记录下来,分享出来。
- react-native-guide
- react-native-open-project
- react-native-awesome React Native Awesome 汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。
第三方开源库
- react-native-vector-icons 这个库可以在线图标查询
- react-native-easy-toast toast解决方案,支持android和ios
- react-native-picker 时间选择组件
- react-native-modal-dropdown 下拉组件
- react-native-orientation 横屏处理
开源完整项目
- GSYGithubAPP
- OneM
- NativeBase
- GitHubPopular
- WanAndroid_RN 玩 Android 客户端,采用 React-Native 开发,适配了 Android 和 iOS,几乎对接了玩安卓的所有 API,内容比较完整
学习路线
开发环境
调式环境
项目打包
项目架构设计
核心技术栈
- react-navigation
https://github.com/react-navigation/react-navigation
安装说明文档:https://reactnavigation.org/docs/en/getting-started.html
npm install react-navigation --save
npm install react-native-gesture-handler
npm install react-native-reanimated
react-native link react-native-reanimated
react-native link react-native-gesture-handler
- redux
redux react-redux redux-thunk
npm install --save-dev redux-logger
axios
npm install axios
fetch
npm install whatwg-fetch --save
UI组件封装
- UI框架
rn.mobile.ant.design - 网络进度加载
- 状态栏沉浸栏
- 日期选择组件
react-native-picker
m-date-picker - 下拉框组件
- 自定义圆角对话框
- 二级列表
- 搜索组件
- 圆角卡片
- 百度图表组件