ReactNative学习——集成到原生android项目中
来源:互联网 发布:mac 显示器校准 编辑:程序博客网 时间:2024/04/30 22:34
当前ReactNative最新版本是0.36
按照网上一篇文章集成。集成玩之后出现了很多错误,一一解决但是有个错误始终解决不了:
Exception in native call from JS com.facebook.react.bridge.JSExecutionException: TypeError: undefined is not a function (evaluating '(bridgeConfig.remoteModuleConfig||[]).forEach') (http://192.168.1.19:8081/index.android.bundle?platform=android&dev=true&hot=false:7303) at com.facebook.react.bridge.ReactBridge.loadScriptFromFile(Native Method) at com.facebook.react.bridge.JSBundleLoader$2.loadScript(JSBundleLoader.java:58) at com.facebook.react.bridge.CatalystInstanceImpl$2.call(CatalystInstanceImpl.java:146) at com.facebook.react.bridge.CatalystInstanceImpl$2.call(CatalystInstanceImpl.java:137) at com.facebook.react.bridge.queue.MessageQueueThreadImpl$1.run(MessageQueueThreadImpl.java:73) at android.os.Handler.handleCallback(Handler.java:733) at android.os.Handler.dispatchMessage(Handler.java:95) at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31) at android.os.Looper.loop(Looper.java:136) at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:184) at java.lang.Thread.run(Thread.java:841).
就这错误 百度 谷歌了两天也没找到答案。后来看到一个人的项目中写的跟上面的集成的代码不一样就从新按步骤来了下 不同的地方按这个项目中的来 最后成功。
本次是在最新的0.36版本下完成。
1、先用AndroidStudio创建一个新项目。RNText。在其根目录中新建一个文件夹命名为android,把剩下的文件全都移到android文件夹下面。
2、在我们Android项目的build.gradle中添加React Native依赖,然后同步,具体代码如下:
compile 'com.facebook.react:react-native:0.36.0'
3、AndroidManifest.xml中加入网络访问权限
<uses -permission android:name="android.permission.INTERNET" />
4、在Android项目的MainActivity中
package com.chs.rntext;import com.facebook.react.ReactActivity;public class MainActivity extends ReactActivity { @Override protected String getMainComponentName() { return "chs"; }}
5、在Android项目的application中
package com.chs.rntext;import android.app.Application;import com.facebook.react.ReactApplication;import com.facebook.react.ReactNativeHost;import com.facebook.react.ReactPackage;import com.facebook.react.shell.MainReactPackage;import java.util.Arrays;import java.util.List;public class TApplication extends Application implements ReactApplication{ @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } 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() ); } };}
别忘了在AndroidManifest.xml中配置这个新建的application
6、在项目根目录中执行命令npm init 创建package.json文件
7、在package.json文件中的scripts中添加代码:
"start": "node node_modules/react-native/local-cli/cli.js start"
8、然后在项目根目录下面执行npm install安装依赖模块
其实就是下载node_modules模块
9、配置flow
链接中的文章中是根据curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig来配置的 这个好像是mac中的方法。
我们正常init一个项目中都会有.flowconfig文件 。我是在init的项目中复制过来的。
10、配置maven让它可以加载我们node_modules文件夹中react-native本地最新版本库。
具体修改文件路径:android/build.gradle
allprojects { repositories { jcenter() maven { url "$projectDir/../../node_modules/react-native/android" } }}
11、创建我们的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';export default class chs extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.android.js </Text> <Text style={styles.instructions}> Double tap R on your keyboard to reload,{'\n'} Shake or press menu button 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('chs', () => chs);
我也是直接在init的一个新项目中复制过来的。不过最后的AppRegistry.registerComponent(‘chs’, () => chs);中的注册的名字要跟MainActivity中的一样跟package.json中的名字也保持一致。
12、然后就可以运行项目了
react-native run-android
OK 出现新项目的欢迎页面。
- ReactNative学习——集成到原生android项目中
- ReactNative集成到原生项目
- ReactNative——集成RN到原生应用
- ReactNative集成到android项目中注意的问题。
- android原生项目整合ReactNative
- Android原生应用集成ReactNative坑总结
- 在Windows上将ReactNative集成到现有的Android项目
- 一个简单的demo说明集成reactnative到android项目
- 将ReactNative项目整合到android项目中步骤
- IOS-React Native 使用CocoaPods集成到原生项目中
- Mac+AS2.2.+ReactNative0.41.2在原生Android项目中嵌入ReactNative的详细步骤
- ReactNative环境搭建与集成到自己android项目以及重新启动adb
- cocoapods 把reactNative 集成到现有项目中Podfile文件内容
- 原生Android项目中集成React native页面
- React Native集成到原生项目(IOS)
- React Native集成到原生项目示例
- React Native 集成到原生项目(iOS)
- React Native 集成到原生项目(iOS)
- 学习android
- 常用正则表达式整理
- 虚拟机Nat模式下设置静态ip
- Android事件分发机制完全解析,带你从源码的角度彻底理解(下)
- 2、spring入门—Spring IOC容器
- ReactNative学习——集成到原生android项目中
- U盘快捷方式病毒修复
- android细字体
- 运行Android程序时DDMS报错:Failed to initialize Monitor Thread: Unable to establish loopback connection。
- 机器之心对俞栋的采访
- stm32寄存器版学习笔记01 GPIO口的配置(LED、按键)
- 大数据性能调优之HBase的RowKey设计
- 获取 UITextView 的光标位置
- SharePrefrence基本用法