React Native在Android当中实践(三)——集成到Android项目当中

集成到Android项目当中

安装JavaScript依赖包

在项目根目录下创建一个名为package.json的空文本文件,然后填入以下内

{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.3"
  }
}

version字段没有太大意义(除非你要把你的项目发布到npm仓库)。scripts中是用于启动packager服务的命令。dependencies中的react和react-native的版本取决于你的具体需求。一般来说我们推荐使用最新版本。 可以使用 npm info react 例如:

npm info react-native

来查看当前的最新版本。另外,react-native对react的版本有严格要求,高于或低于某个范围都不可以。 除此之外还有一种方式创建package.json 在Android Studio的下打开Terminal命令行,输入npm init 如图

依次输入相关内容

最后会根据你输入的内容生成一个package.json 内容如下:

生成之后可以看到根目录当中增加了一个文件

完成之后 我们执行npm install命令 执行之后 我们可以看到命令正在执行

整个过程相对较慢 如果你安装了yarn 则可以直接执行yarn 相对npm install 这个过程会快一些

成功之后

我们会发现目录当中增加一个 /node_modules 文件夹,里面是所有需要的 JavaScript 依赖,可以打开查看一下,内容非常多。

接下来我们要把React Native集成到我们的应用当中 配置maven 在你的app中build.gradle 文件中添加 React Native 依赖:

dependencies {
     ...
     compile "com.facebook.react:react-native:+" // From node_modules.
 }

如果想要指定特定的React Native版本,可以用具体的版本号替换 +,当然前提是你从npm里下载的是这个版本 。 接下来在项目中的build.gradle 文件中为 React Native 添加一个 maven 依赖的入口,必须写在 "allprojects" 代码块中: 例如:

allprojects {
    repositories {
        ...
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
    ...
}

注意这里的"$rootDir/../node_modules/react-native/android"必须写对了 如果路径写错了在运行Gradle同步构建的时候就会抛出“Failed to resolve: com.facebook.react:react-native:0.x.x" 异常。 查看项目中有node_modules,说明react和react native 安装完成。

添加.flowconfig

下载flowconfig文件

curl
-o .flowconfig [https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig](https://link.jianshu.com/?t=https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig)

在项目根目录添加.flowconfig 也可以手动创建在浏览器 https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 网址复制内容创建文件 添加

"start": "node node_modules/react-native/local-cli/cli.js 

到package.json文件下scripts标签 修改前 如图

修改后 如图

接着,在 AndroidManifest.xml 清单文件中声明网络权限: <uses-permission android:name="android.permission.INTERNET" /> 如果需要访问 DevSettingsActivity 界面(即开发者菜单),则还需要在 AndroidManifest.xml 中声明:

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /> 开发者菜单一般仅用于在开发时从Packager服务器刷新JavaScript代码,所以在正式发布时你可以去掉这一权限。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏古时的风筝

django开发个人简易Blog—nginx+uwsgin+django1.6+mysql 部署到CentOS6.5

前面说完了此项目的创建及数据模型设计的过程。如果未看过,可以到这里查看,并且项目源码已经放大到github上,可以去这里下载。 代码也已经部署到sina sea...

31190
来自专栏有困难要上,没有困难创造困难也要上!

Webpack2入门

31870
来自专栏云计算教程系列

如何在Ubuntu 16.04上使用uWSGI和Nginx为Django应用程序提供服务

Django是一个功能强大的Web框架,可以帮助您实现Python应用程序或网站。Django包含一个简化的开发服务器,用于在本地测试您的代码,但是对于任何与生...

14600
来自专栏Java后端生活

Linux(十五)进程管理

28980
来自专栏IMWeb前端团队

node.js入门心得

很多前端开发的同学应该都会接触或者了解nodejs,但是经常会听到入门难的抱怨。一方面不知道怎么学习nodejs。另一方面,拿到一些大牛写的nodejs源代码,...

27470
来自专栏散尽浮华

jenkins配置记录(1)--添加用户权限

前一阵子在线上部署了一套jenkins环境,作为线上代码发布平台使用。 部署记录:http://www.cnblogs.com/kevingrace/p/565...

56780
来自专栏SpringBoot 核心技术

第九章:SpringBoot内置SpringMvc静态文件地址修改

34720
来自专栏前端杂货铺

解决ajax跨域请求 (总结)

ajax跨域请求,目前已用几种方法实现: 1)用原生js的xhr对象实现。                var url="http://freegeoip....

33380
来自专栏Jerry的SAP技术分享

一种不通过UI给C4C自定义BO创建测试数据的方式

假设我在Cloud Studio里创建了如下一个非常简单的自定义BO:

24390
来自专栏SpringBoot 核心技术

第十六章:使用Redis作为SpringBoot项目数据缓存

27220

扫码关注云+社区

领取腾讯云代金券