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 条评论
登录 后参与评论

相关文章

来自专栏xcywt

《Linux命令行与shell脚本编程大全》 第七章理解Linux文件权限

Linux沿用了Unix文件权限的方法,允许用户和组根据每个文件和目录的安全性设置来访问文件。 用户权限通过创建用户时分配的用户ID(UID)来跟踪的。每个用户...

2205
来自专栏IT综合技术分享

一、搭建SpringBoot2.0.0M4基础Web项目

SpringBootDemo1 - [~-IdeaProjects-SpringBootDemo1] - IntelliJ IDEA 2017.2.4_022....

1912
来自专栏nummy

sphinx入门指南【2】 toctree指令详解

reST本身并不支持同时与多个文档进行交互,或者说将一个文档保存到多个文件中。Sphinx提供了自定义指令toctree来支持实现这个功能。

1093
来自专栏用户2442861的专栏

git以及github的使用(1)

http://my.oschina.net/bxxfighting/blog/378196

571
来自专栏代码散人

利用XCode Targets创建多scheme的iOS项目

在我们的开发iOS的时候,通常会遇到一个项目打包成多个环境的问题,也会遇到一套代码打包成多个项目的问题,最常用的做法是写一个配置文件,在打包的时候修改一下配置文...

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

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

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

870
来自专栏北京马哥教育

Linux下六个有关file使用的实例

云豆贴心提醒,本文阅读时间4分钟 简介 file的官方解释是: 1.file - determine file type 是可以识别文件类型的意思,也可用来...

4169
来自专栏SpringBoot 核心技术

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

2292
来自专栏SpringBoot 核心技术

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

2902
来自专栏Java后端生活

Linux(十五)进程管理

2348

扫码关注云+社区