react native 开发环境搭建这里就不多讲了，开发环境搭建直接看这里
下面来看看android端搭建react-native开发环境：
- 在项目的根目录中运行，在应用中添加react-native 环境代码：
npm init
npm install --save react react-native
npm init创建了一个空的node模块（其实就是创建了一个package.json描述文件）,
npm install则创建了node_modules目录并把react和react-native下载到了其中。
- 在你的app中 build.gradle(Module级别) 文件中添加 React Native 依赖:
dependencies {
...
compile "com.facebook.react:react-native:+" // From node_modules.
}
- 在项目的 build.gradle （Project级别）文件中为 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"
}
}
...
}
确保依赖路径的正确！以免在 Android Studio 运行Gradle同步构建时抛出 “Failed to resolve: com.facebook.react:react-native:0.x.x" 异常。
- 在 AndroidManifest.xml 清单文件中声明网络权限以及调试用的DevSettingsActivity声明:
<uses-permission android:name="android.permission.INTERNET" />
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
其实到这里，开发环境已经完成了。
- 接下来想要通过原生代码调用 React Native ，我们需要创建一个Activity 对象并让它继承ReactActivity：
public class CollectionSearchRNActivity extends ReactActivity {
public static final String MAIN_COMPONENTNAME = "collectionSearch"; //这是本Activity映射到RN中的别名
@Override
protected String getMainComponentName() { //必须重写该函数
return MAIN_COMPONENTNAME;
}
}
当然必要的的在 AndroidManifest.xml 清单文件中作相关的声明：
<activity android:name=".CollectionSearchRNActivity" />
然后在你的react-native端，要注册CollectionSearchRNActivity，用别名字符串注册：
import React, { Component } from 'react';
import {
AppRegistry
} from 'react-native';
AppRegistry.registerComponent('collectionSearch', () => collectionSearch);//馆藏检索
AppRegistry.registerComponent（）第一个参数的'collectionSearch'，表示react-native 内部的组件，这个名字随便你自己编码的时候取，没有硬性要求，第二个参数是个函数，ES6的写法，返回值collectionSearch表示上面之间在android本地创建的一个Activity 的别名collectionSearch，必须同步对应。
- ** 最后你就可以去创建一个名为collectionSearch的组件了，这里就不多说了，创建完后，就可以运行。**
额外福利，当你运行的程序是，如果环境都搭建好了，运行时跑错说啥服务没跑起来，让你检查这检查那一大堆的，你可以控制台在项目跟目录下运行 ：react-native start，启动服务支持。要是还是断开连接，你可以尝试控制台下运行：adb reverse tcp:8081 tcp:8081，然后问题就可以解决了。
网友评论