原生Android项目中集成React native页面

原创 2016年08月31日 12:12:12

看下效果:


1.先建一个空目录 eg:android-reactnative,在目录下新建一个android 文件夹,将自己原有的Android工程(假如没有就创建一个HelloWorld )。扔里面。
2.创建package.json。方法一:npm init  一路狂点enter,就生成了一个package.json。
                                方法二:自己创建,
{
  "name": "MyDemo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.3.1",
    "react-native": "0.32.0",
    "react-native-wechat": "^1.5.5"
  }
}


这些参数看一下就明白意思了。
方法三:可以把已有的RN项目中的package.json复制过来。可以自行修改。
注意: 记住这个name的值。下面有用到
3.npm  install
4.curl -o .flowconfig   https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
 或者
 复制其他项目中的 .flowconfig 文件
5.创建 index.android.js
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
 
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
 
class MyDemo extends Component {
  render() {
    return (
      <View style="{styles.container}">
        <text style="{styles.welcome}">
          Welcome to React Native!
        </text>
        <text style="{styles.instructions}">
          我是原生项目嵌入的 ReactNative
        </text>
        <text style="{styles.instructions}">
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </text>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
 
AppRegistry.registerComponent('MyDemo', () => MyDemo );


6.开始配置上的修改。
 ①android app 下的build.gradle  添加ndk支持.以及依赖包
defaultConfig {
  。。。

  ndk {
  abiFilters "armeabi-v7a", "x86"
  }
}

dependencies {
 。。。
  compile "com.facebook.react:react-native:+" // From node_modules
}




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


在gradle.properties中, 添加ndk选项.
android.useDeprecatedNdk=true

AndroidManifest.xml中添加权限,(这个必须有,测试时候一直提示连不上服务器。原来是这个问题,但是纯RN项目里面没看到啊。。。)
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
添加网络设置Activity
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
⑤添加 MainApplication,直接复制就行,加入原项目中有,那就修改下,实现ReactApplication 。

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this){

        @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage()
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}


开始测试了。在主界面跳转到第二个页面。SecondActivity ,在AndroidManifest.xml 添加
<activity android:name=".SecondActivity"></activity>


public class SecondActivity extends ReactActivity {


    @Override
    protected String getMainComponentName() {
        return "MyDemo";
    }
}



OVER 大功告成
直接react-native run
或者在studio里面运行。
源码
注意

出现:android.app.Application cannot be cast to com.facebook.react.ReactApplication

解决方案:需要将创建的MainApplication在AndroidManifest.xml配置好.

版权声明:本文为博主原创文章,未经博主允许不得转载。

Android项目中集成React Native

React Native是非常强大的,但有的时候我们可能并不需要从0开始去开发一个React Native应用,而是需要把它集成到我们现有的Android工程中去,去添加单个的React Native...
  • heqiangflytosky
  • heqiangflytosky
  • 2017年02月27日 14:29
  • 1949

android 原生项目集成react-native的坑

集成方法react-native 中文http://reactnative.cn/docs/0.47/integration-with-existing-apps.html#content 这里的版本...
  • u011094768
  • u011094768
  • 2017年09月13日 17:30
  • 94

已有Android工程集成ReactNative页面

React Native出自Facebook之手, 而且刚刚更新了文档, 差一点我就放弃它了, 然而又捞了回来, 相比其他, 毕竟还是大公司大品牌有保障. 不多说了, 想知道更多, 自己网上看吧.网址...
  • u012515223
  • u012515223
  • 2015年10月31日 17:33
  • 3820

iOS在原生项目中插入React Native(最终版)

iOS原生项目中插入react native的教程
  • passionhe
  • passionhe
  • 2016年10月10日 11:26
  • 2238

如何把React Native嵌入到原生android应用中

原生应用不仅可以跳转到RN页面,也可以吧RN的组件放到原生应用中,作为原生应用的一部分。 首先介绍如何把react native嵌入到android中,然后再介绍如何把RN嵌入到ios中; 第一部分:...
  • liu__520
  • liu__520
  • 2016年10月14日 16:31
  • 4083

Android原生项目集成React Native

1.创建Android工程:ReactNativeApp 关于如何创建Android工程就不再多述了。 2.工程创建完毕后,切换到Android Studio左下角的Terminal窗口,...
  • u013718120
  • u013718120
  • 2017年02月13日 18:01
  • 7211

android原生项目整合ReactNative

android原生项目整合ReactNative1、配置环境1.1、使用Android Studio创建Android原生项目1.2、安装node.js1.3、在项目根目录使用npm init命令创建...
  • panhongzhi02
  • panhongzhi02
  • 2017年02月07日 15:55
  • 1064

iOS开发-React Native(V0.47)在现有项目中集成+踩坑

React-Native 是由Facebook出品的一款可以使用JavaScript来编写原生app的框架,官方说明是:A framework for building native app with...
  • James_1_2_1_1
  • James_1_2_1_1
  • 2017年08月09日 15:01
  • 1354

IOS-React Native 使用CocoaPods集成到原生项目中

本人亲测1, 用Xcode创建一个ios项目2, 我们在RN-IOS 项目目录建一个package.json文件,用于初始化react-native。 //{ “name”: “Awesome...
  • liu1191773428
  • liu1191773428
  • 2016年11月16日 12:24
  • 929

最新iOS原生项目集成React-Native

大楼不是一天所建成,是时间慢慢积累起来滴,原先用原生写的项目,没办法将项目中所有的代码都换成RN,而且我也不认为全换成RN就是好的,所以准备先将项目中的一些页面改成RN开发。由于我们并没有使用Coco...
  • u012352203
  • u012352203
  • 2017年10月26日 13:58
  • 321
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:原生Android项目中集成React native页面
举报原因:
原因补充:

(最多只允许输入30个字)