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
网友评论