美文网首页
三、项目运行

三、项目运行

作者: 伯纳乌的追风少年 | 来源:发表于2018-03-15 18:02 被阅读0次

    一、项目介绍:

    为了学习RN开发app,我在跟完了慕课网上scott老师的实战课程《掌握React Native技术转型随意切换》
    在跟随这门课程的过程中,我完成了该课程的示例项目:“狗狗说”。
    这是一个给狗狗配音的App,先录制一个狗狗的视频,然后通过自己说话给视频配音,最后生成一个配音后的视频就仿佛狗狗自己在说话一样。


    本篇介绍如何将这样一个已经完成的React Native项目在我们的本地跑起来。
    首先,附上我已经完成的该项目github地址:gougouTalk

    二、运行项目:

    我们先将项目clone下来:

    git clone https://github.com/xiaoxiekeke/gougouTalk.git
    

    当前github项目有两个版本,0.36和0.51版,分别对应两个分支。0.36版本是使用ES5写的,目前在安卓中有兼容问题跑不起来,只做了ios的兼容。0.51是基于0.36改造的ES6语法版本,可以在安卓和ios双平台中运行起来。建议大家切换到0.51分支,使用0.51的代码进行学习和运行。
    clone完成后,当前目录下出现一个gougouTalk文件夹,然后进入该文件夹切换分支,安装项目依赖。

    cd gougouTalk
    git checkout 0.51
    npm i
    

    安装完依赖后,由于我们的项目中用到了一些原生的功能,所以需要将原生依赖链接到项目中,参考文档:链接原生库

    react-native link
    

    在链接完原生依赖中,还有一些特殊的配置需要我们手动去完成。
    我们在项目中用到了大量的第三方插件,如:

    react-native-audio
    react-native-image-picker
    react-native-video
    

    每个第三方插件都有其特定的配置要求,我们可以通过js.coach去查找相关的插件的用法和安装配置方法,其配置方法必须严格按照官方文档执行,否则可能会导致项目无法运行。
    例如在js.coach中搜索react-native-audio插件


    然后点击查看插件的用法:



    解决完插件的配置后,还有一些额外的问题需要解决。我找了一些别人的解决方案,根据文章的指导按部就班的完成就行了。
    1、iOS9 & iOS10 & iOS11 以后的系统都不能原生支持http协议了,解决的办法是:https://segmentfault.com/a/1190000002933776
    2、如果是一个初始化的ios项目需要添加ART.xcodeproj文件,具体方法:http://blog.csdn.net/u010940770/article/details/71126700

    确保解决了问题后可以尝试运行项目:

        react-native run-ios
        react-native run-android
    

    如果你已经提前完成了第二章“开发环境搭建”中的所有工作的话,那么走到这一步,应该已经可以成功把项目在模拟器中安装并运行起来了。

    初次安装应该进入的是轮播页面:


    IOS模拟器
    Android模拟器

    如果在终端直接run运行不起来或者报错的话,可以尝试用XCode和Android Studio打开项目并点击运行按钮进行安装和启动。


    相关文章

      网友评论

          本文标题:三、项目运行

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