专栏首页向治洪android 添加React Native支持更新版

android 添加React Native支持更新版

前言

之前已经写过了有关React Native移植原生Android项目的文章,不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题,对于初学者来讲还是会有很多疑难的困惑的,这里针对最新的版本做一个新的讲解。

环境搭建

官方文档

英文官方文档 中文官方文档

集成步骤

用android studio创建一个基本的android hello world程序。

在项目根目录中通过npm向导生成package.json文件,在cmd中输入命令:

npm init

在package.json文件中添加启动脚本:

"start": "node node_modules/react-native/local-cli/cli.js start"

注:这里可能会报一个json的错误,请仔细检查json。附上我本地的实例:

{
  "name": "shopping",
  "version": "0.0.1",
  "description": "shopping",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "author": "xiangzhihong",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-native": "^0.40.0"
  }
}

添加react-native npm依赖,在命令行输入:

npm install react react-native --save

创建index.android.js文件,也可以从之前的项目中拷贝。

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello, World</Text>
      </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

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

在你app的build.gradle文件中添加react native依赖库。

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

在你project的build.gradle文件中添加react native路径。

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

注:这里可能报一个错误,兼容的问题:

Warning:Conflict with dependency 'com.google.code.findbugs:jsr305'. Resolved versions for app (3.0.1) and test app (2.0.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.

解决方法:在你的app(应用程序的build.gradle中添加下面的配置脚本,不是项目的那个build.gradle)。

configurations.all {
    resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}

修改AndroidManifest.xml文件中添加权限:

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

添加AndroidReactActivity:

package com.rn.shopping;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;

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;

import static com.facebook.react.common.ApplicationHolder.getApplication;


public class AndroidReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);


        mReactRootView = new ReactRootView(this);
        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);


        setContentView(mReactRootView);
    }


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


    @Override
    protected void onPause() {
        super.onPause();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onPause();
        }
    }


    @Override
    protected void onResume() {
        super.onResume();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onResume(this, this);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onDestroy();
        }
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
}

build android,如果报错,请自行检查错误原因。 将AndroidReactActivity加入AndroidManifest.xml文件中:

<activity
    android:name=".AndroidReactActivity"
    android:label="@string/app_name"
    android:theme="@style/Theme.AppCompat.Light.Dialog">
</activity>

将DevSettingsActivity配置加入到AndroidManifest.xml文件中:

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

最终完整的AndroidManifest.xml文件

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.platform.ourplam.androidreacttest">

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".AndroidReactActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.AppCompat.Light.Dialog">
        </activity>
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

在MainActivity中添加Button,添加点击事件启动AndroidReactActivity作为我们的测试。

 Intent intent = new Intent(MainActivity.this, AndroidReactActivity.class);
                startActivity(intent);

最后我们使用命令启动npm就好了:

npm start

注:如果你遇到下面的问题,这是由于不兼容的问题,需要将编译环境改一下:

Method 'void android.support.v4.NET.ConnectivityManagerCompat.()' is inaccessible to class 'com.facebook.react.modules.netinfo.NetInfoModule'

解决方法:

com.android.support:appcompat-v7:23.0.1

附:https://cloud.tencent.com/developer/article/1035990 https://cloud.tencent.com/developer/article/1035975

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 讯飞语音

    、你需要android手机应用开发基础 2、科大讯飞语音识别SDK android版 3、科大讯飞语音识别开发API文档 4、android手机 关于科大讯飞S...

    xiangzhihong
  • 语音兰度短信

    原理:获取来电短信内容,调用系统的语音朗读功能。 效果图: ? 具体代码如下: 1,获取短信息: package com.internal.message;  ...

    xiangzhihong
  • toggbutton

    2013年8月14日Android记录 很多应用都会有用户设置,用户的一些偏好可以由用户来决定那是应用人性化的体现,在实际开发中很多情况都作成可配置的了,本篇博...

    xiangzhihong
  • Android的Fragment的第一种声明方式

    Dream城堡
  • C#设置有命令空间的属性

    之前被问到一个问题,C#中如何设置android:name这样的属性?我的第一反应是直接setAttribute不就可以了么 SetAttribute(name...

    meteoric
  • 用百度地图API打造方便自己使用的手机地图

    有钱人咱就不说了,因为偶是个穷银……因为穷,所以去年买的Huawei C8650+到现在还在上岗,对于没有钱买好的配置的手机的童鞋来说,类似于百度,谷歌,高德等...

    lzugis
  • 界面无小事(七):使用代码动态增删布局

    SeanDepp
  • 使用代码动态增删布局(2018.8重编版)

    SeanDepp
  • Android中的AutoCompleteTextView的使用

    最终的效果如下: ? main.xml代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xm...

    hbbliyong
  • 创建一个新的安卓应用程序 设置主Activity

    听着music睡

扫码关注云+社区

领取腾讯云代金券