（二）React Native混合原生HelloWord

假设已经执行过reaact-native init AwesomeProject，生成了AwesomeProject

打开AwesomeProject文件夹，看到如下目录结构：

用Android Studio打开AwesomeProject/android文件夹，

1）运行项目

通过数据线连接好android手机，点击上图，三角箭头运行项目，

可能的报错：

如果项目报：No target device found,

报错

则需改app/build.gradle,修改version为Android SDK Manager里有的版本

修改version

install的都可以

2）编写RN页面

1、RN js调用java方法

RN js ——> (调用) ReactContextBaseJavaModule———>(注册到)ReactPackage ———>(注册到) ReactApplication

2、页面跳转—>原生嵌套RN

java代码：

public class DemoTwo extends ReactActivity {

private ReactRootView mReactRootView;

private ReactInstanceManager mReactInstanceManager;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.demo_two);

mReactRootView = (ReactRootView) findViewById(R.id.react_root);

mReactInstanceManager = ReactInstanceManager.builder()

.setApplication(getApplication())

.setBundleAssetName("index.android.bundle")

.setJSMainModuleName("index.android")

.addPackage(new MainReactPackage())

.setUseDeveloperSupport(BuildConfig.DEBUG)

.setInitialLifecycleState(LifecycleState.RESUMED)

.build();

mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);

}

}

原生页面嵌入：

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/react_root"

android:layout_width="match_parent"

android:layout_height="match_parent" />

3、页面跳转—>原生跳转RN

原生链接点击，跳转RN，CNodeListActivity实现了ReactActivity接口

@Click(R.id.ll_publish_house)

public void houseRelease() {

Intent intent = new Intent(getActivity(), CNodeListActivity.class);

startActivity(intent);

}

4、页面跳转—>RN跳转原生

调用ReactContextBaseJavaModule的方法