React Native 学习笔记十二（嵌入原生应用 甚是坑啊）

1.首先 创建一个android studio 项目 我创建的叫HelloReactDemo2（随便起的）

2 .按照官网的介绍来做 

   在Terminal中输入 npm init  

   会给出对应的提示  如图：

此时会提示 输入信息  name  这是为了生成必要的package.json文件   按照如下图进行填写

name: (HelloReactDemo2) helloreactdemo2（输入的名称不能含有大写）
version: (1.0.0) //直接回车
description: demo for moving react-native to android//项目描述 随意写
entry point: (index.js) index.android.js //入口js名称 自定义
test command:  //直接回车
git repository:  //git库
keywords: react test  
author: //自己的名字
license: (ISC) //回车

输入完成会出现json进行信息的展示  

About to write to /Users/zhangyanjiao/Desktop/react/helloReact/HelloReactDemo2/package.json:


{
  "name": "helloreactdemo2",
  "version": "1.0.0",
  "description": "demo for moving react-native to android",
  "main": "index.android.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "react",
    "test"
  ],
  "author": "zhangyanjiao",
  "license": "ISC"
}




Is this ok? (yes) yes//确认无误输入yes

打开生成的package.json 文件 （在项目根目录下面）如下图进行添加

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "bundle-android": "react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –sourcemap-output android/app/src/main/assets/index.android.map –assets-dest android/app/src/main/res/"
  }

3.输入npm install --save react-native 命令 下载node_moudle 

但是如果网络不好的话 下载起来比较慢 此时 只需要将原有的node_moudles 拷贝进来 扔在根目录 或者上级目录中即可 

4.输入curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 命令 

生成 .flowconfig文件

5.在gradle中配置环境

compile 'com.facebook.react:react-native:+'

官网上说的  但是不建议使用＋为了避免出现 reactnative版本跟服务器的版本不符的情况  但是有些博客上让用户使用0.32.0  但是在类库中好像找不到 facebook的  只能选择已有的 

添加 

6.添加网络访问权限

<uses-permission android:name="android.permission.INTERNET" />本地React Native的maven目录(现在React Native的所有组件,无论JS还是Android的预编译包，都是通过npm分发的了):

在android/build.gradle的jcenter()后面 

如果不添加  或者添加的地址不对  则会出现Method 'void android.support.v4.net.ConnectivityManagerCompat.<init>()' is inaccessible to class 'com.facebook.react.modules.netinfo.NetInfoModule'错误  这个错误主要是由于 我们的react－native 无法使用最新包造成的   我的node_moudle 放在当前的根目录下面所以只需要在根目录下面找就好了 如果放在上层目录 那么足需要向上一级 ../去查找

1. maven {    
2.            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm    
3.            url "$rootDir/node_modules/react-native/android"    
4.        }  

基本环境 搭建完毕

创建使用的Demo

两种创建方式  但是我只写自己常用的这种 

在MainActivity.java中进行修改 （具体解释  可以看注释）

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.widget.Toast;

import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;

public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler{
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //创建一个ReactRootView，把它设置成Activity的主视图
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
//                一般情况下 创建父类继承自MainReactPackage 获取已经创建的package集合  然后将新的package添加进去
//                在这里为了省事我就不再创建
                .addPackage(new MainReactPackage())
                .addPackage(new AnExampleReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
//        再当前主视图中 添加对应视图中
        mReactRootView.startReactApplication(mReactInstanceManager, "MyApp", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    //传递一些Activity的生命周期事件到ReactInstanceManager，这是的JavaScript代码可以控制当前用户按下返回按钮的时候作何处理（譬如控制导航切换等等）。
    // 如果JavaScript端不处理相应的事件，你的invokeDefaultOnBackPressed方法会被调用。默认情况，这会直接结束你的Activity。
    @Override
    protected void onPause() {
        super.onPause();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause();
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this,this);
        }
    }

    @Override
    public void onBackPressed() {
//        mReactInstanceManager.showDevOptionsDialog();
        Toast.makeText(this, "dianjialefanhuijian", Toast.LENGTH_SHORT).show();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

    //我们需要改动一下开发者菜单。默认情况下，任何开发者菜单都可以通过摇晃或者设备类触发，不过这对模拟器不是很有用。所以我们让它在按下Menu键的时候可以显示
    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {

            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
}

创建之前创建index.android.json时创建的文件

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ToastAndroid

} from 'react-native';

var { NativeModules } = require('react-native');

 class MyApp extends Component {

    constructor(props) {
        super(props);

    }


    render() {
        return(
            <View >
               <Text>{'hahahhahhahah'}</Text>
            </View>
        )

    }
}

AppRegistry.registerComponent('MyApp', () => MyApp);

在终端 输入npm start 启动开发者服务器的连接 运行该项目即可 

如果是5.0一下的手机 就会出现 连接不上服务器的问题  那么 使用

adb reverse tcp:8081 tcp:8081

也没有什么卵用  还会报错  这时候我们需要自己手动添加 

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

 然后摇一摇打开弹窗 选择 dev setting  设置端口号  自己的ip：8081  然后再重新运行

adb reverse tcp:8081 tcp:8081

npm start

重新加载就好了

如果出现其他错误  可能是npm init 时下载的node_moudle 包不完整的问题  那么 就直接把这个包删掉 在之前 创建的react项目中去拷贝一个

 实现就是在一个界面上 出现一行我自己输出的hahahhahaha 图就不传了   

有需要的用户可以进一步看我下一片文章 关于原生功能的使用