为什么用react-native
React Native使你只使用JavaScript也能编写原生移动应用。 它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的用户界面。
所以前端三大框架只要熟悉了react就可以使用react-native开发应用,基本编写方式差不多,各位前端们也可以自豪的说我可以开发“原生应用”了。
为什么要用dva
dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。
简单的说就是dva很好的帮助我们集合了reducer, saga, action,让我们方便开发罢了,而react-native里还没有很好管理数据流的方案,所以将dva结合到react-native中就非常重要了。
使用nihgwu 开发的react-native-dva-starter脚手架
基于react-navigation的react-native页面跳转方案,结合dva,更方便开发App, 不过目前最新版的react-native-dva-starter脚手架还是结合的react-navigation 2.0+版本,使用的时候需要注意。
首先将react-native-dva-starter下载到本地,执行npm install or yarn 安装依赖,使用 react-native run-ios or react-native run-android 运行项目。
npm install or yarn
react-native run-ios or react-native run-android
作者目前已将脚手架支持react-native@0.55.4 & react-navigation@2.5.1 版本,不过在react-native run-ios时却提示
'config.h' file not found
解决方案就是来自https://github.com/facebook/react-native/issues/19529的### ReggaePanda这位大哥,执行之后果然好了。
执行以下代码
rm -rf node_modules/ && yarn cache clean && yarn install
node_modules/react-native/scripts/ios-install-third-party.sh
cd node_modules/react-native/third-party/glog-0.3.4
./configure
接下来在xcode中打开项目发现有以下错误,只需要装引用资源减掉再加上就好了。
image.png image.png
image.png
接下来开发环境依然是 命令行 输入 react-native run-ios , 哒哒哒哒,项目成功运行,现在就开始愉快的开发起来吧。
IOS模拟器运行截图
安卓运行注意
react-native run-android 在安卓上运行时,也可能会出一些错误,如adb: command not found问题,这是因为Mac 上未配置,请自行配置
安卓模拟器运行截图打开Mac的terminal终端,输入 cd ~/ 【进入当前用户的home目录】
输入 touch .bash_profile 【如果没有.bash_profile文件,则创建】
输入 open .bash_profile 【打开刚刚创建的文件,此时弹出文本编辑框】
在打开的文本编辑框中写入如下代码:
export ANDROID_HOME=/Users/名/Library/Android/sdk #自行填写安卓SDK实际目录
export PATH={ANDROID_HOME}/tools
export PATH={ANDROID_HOME}/platform-tools
网友评论