三、项目运行

2018-03-15  本文已影响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打开项目并点击运行按钮进行安装和启动。


上一篇下一篇

猜你喜欢

热点阅读