美文网首页
RN - 快速开发模版

RN - 快速开发模版

作者: iOS_杨平 | 来源:发表于2019-11-15 16:31 被阅读0次

1.初始化工程

使用RN最新版本创建工程(最新的稳定版本会在每次使用react-native init命令创建新项目时自动采用)

react-native init AwesomeProject

指定RN最新版本创建工程

react-native init MyApp --version 0.58.6

2.安装常用的库(按需安装)

网络请求:(https://github.com/axios/axios

npm install axios

精美的UI库:(https://github.com/GeekyAnts/NativeBase

npm install native-base --save

react-native link

获取设备信息:(https://github.com/rebeccahughes/react-native-device-info

npm install --save react-native-device-info

react-native link react-native-device-info

toast提示:(https://github.com/magicismight/react-native-root-toast

npm install react-native-root-toast

页面路由管理:

https://blog.csdn.net/jiecsdn/article/details/58652511

https://blog.csdn.net/jiecsdn/article/details/58721919

https://blog.csdn.net/jiecsdn/article/details/59057026

npm i react-native-router-flux --save

加载中loading:(https://github.com/maxs15/react-native-spinkit

npm install react-native-spinkit@latest --save

react-native link

微信分享、微信支付:(

https://github.com/yorkie/react-native-wechat

https://blog.csdn.net/likeconan123/article/details/78993304

npm install react-native-wechat --save

详细配置见博客

组件状态管理:(https://github.com/search?q=mobx

https://github.com/mobxjs/mobx

https://github.com/mobxjs/mobx-react

https://www.jianshu.com/p/be54fa049862

npm i mobx mobx-react --save

npm i babel-plugin-transform-decorators-legacy babel-preset-react-native-stage-0 --save

npm i @babel/core --save

npm i @babel/plugin-proposal-decorators --save

npm i @babel/plugin-transform-runtime --save

npm i @babel/runtime

根据博客配置.babelrc和index.js

组件状态管理:(https://github.com/reduxjs/redux

npm install --save redux

npm install --save react-redux

npm install --save-dev redux-devtools

轮播图依赖:(https://github.com/facebook/prop-types

https://github.com/npmdoc/node-npmdoc-lodash.isequal

npm install --save prop-types

npm i lodash.isequal

地图依赖库:(https://github.com/qiuxiang/react-native-amap3d

npm i react-native-amap3d

react-native link react-native-amap3d

根据github文档进行配置

毛玻璃效果:(https://github.com/react-native-community/react-native-blur

npm install react-native-blur

react-native link react-native-blur

安卓需要根据github文档额外配置

 

图标:(https://github.com/oblador/react-native-vector-icons

npm install react-native-vector-icons --save

react-native link react-native-vector-icons

热更新:(https://github.com/Microsoft/react-native-code-push

npm install --save react-native-code-push

根据博客或github文档进行配置

闪白屏问题解决方案:(https://www.jianshu.com/p/a700e8bd15ff

npm install react-native-launch-image --save

react-native link react-native-launch-image

再根据博客进行额外配置

弹框提醒:(https://github.com/jacklam718/react-native-popup-dialog

npm install --save react-native-popup-dialog

本地缓存:(https://github.com/sunnylqm/react-native-storage

npm install react-native-storage@beta

ant-design的移动规范的 React 实现

npm install @ant-design/react-native --save

链接字体库

react-native link @ant-design/icons-react-native

手势缩放拖动查看图片

npm i react-native-image-pan-zoom --save

相关文章

网友评论

      本文标题:RN - 快速开发模版

      本文链接:https://www.haomeiwen.com/subject/evensctx.html