27

React Native集成到Android项目当中

 4 years ago
source link: https://www.tuicool.com/articles/jUjae2q
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

集成到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

例如:

fMVnMv2.png!web

和

npm info react-native

u2qIn2A.png!web

来查看当前的最新版本。另外，react-native对react的版本有严格要求，高于或低于某个范围都不可以。

除此之外还有一种方式创建package.json

在Android Studio的下打开Terminal命令行，输入npm init 如图

MfuMj2q.png!web

依次输入相关内容

ZJJVNz6.png!web

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

内容如下：

JV3UnqU.png!web

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

NR7rQbe.png!web

完成之后 我们执行npm install命令 执行之后

我们可以看到命令正在执行

e6jAvaq.png!web

整个过程相对较慢

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

rY3Qvyn.png!web

成功之后

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

nMFjmyi.png!web

接下来我们要把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标签

修改前 如图

mEJRVna.png!web

修改后 如图

bIJvQff.png!web

接着，在 AndroidManifest.xml 清单文件中声明网络权限:

<uses-permission android:name="android.permission.INTERNET" />

如果需要访问 DevSettingsActivity 界面（即开发者菜单），则还需要在 AndroidManifest.xml 中声明:

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

开发者菜单一般仅用于在开发时从Packager服务器刷新JavaScript代码，所以在正式发布时你可以去掉这一权限。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK