美文网首页
react-native-dva-starter搭建时遇到问题解

react-native-dva-starter搭建时遇到问题解

作者: citteey | 来源:发表于2019-01-11 14:04 被阅读0次

    为什么用react-native

    React Native使你只使用JavaScript也能编写原生移动应用。 它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的用户界面。

    所以前端三大框架只要熟悉了react就可以使用react-native开发应用,基本编写方式差不多,各位前端们也可以自豪的说我可以开发“原生应用”了。

    为什么要用dva

    dva 首先是一个基于 reduxredux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-routerfetch,所以也可以理解为一个轻量级的应用框架。

    简单的说就是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={PATH}:{ANDROID_HOME}/tools
    export PATH={PATH}:{ANDROID_HOME}/platform-tools

    安卓模拟器运行截图

    相关文章

      网友评论

          本文标题:react-native-dva-starter搭建时遇到问题解

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