后台ReactNative出来有一段时间了，比较稳定。许多公司实际上都在使用它们。混合开发已经是未来的一个趋势，混合开发用到的技术有很多，无非就是Html5、JS框架通过一定的技术和独创的交互，目前主流的混合开发ReactNative、Cordova、APICloud、MUI、AppCan、SenchaTouch,jQueryMobile等（其他小伙伴自己收集），目前网上写教程的人很多，但是ReactNative更新的很快。按照他们的教程，中间会出现各种问题。今天就和大家一起踩各种坑，让Friends快速融入自己的APP。集成小伙伴一定要注意图片中的注释和注意事项，否则可能会走弯路SDK是16（android4.1）npm环境。你可以自己安装nodeJS。可以参考官方文档安装环境。有问题可以发411437734@qq.com交流，创建Android项目（已有项目略过）1.打开Androidstudio2。输入项目名称，选择项目目录，点击next，直到创建项目（注意***ReactNative支持***SDKversion16android4.1）ReactNative集成到我们上面创建的ReactNativeAPPDemo中参考Facebookreactnative文档1.进入项目根目录，将JS添加到项目中——在Androidstudio中点击Terminal（如下图）执行语句npminitnpminstall--savereactreact-nativecurl-o.flowconfighttps://raw.githubusercontent。com/facebook/react-native/master/.flowconfiginit主要根据提示生成package.json文件install--savereactreact-nativeinstallReact和ReactNativecurl-o.flowconfighttps://raw.githubusercontent.com/facebook/react-native/master/.flowconfig下载.flowconfig文件参照图片查看项目中的node_modules，说明安装了react和reactnative。在项目根目录下添加.flowconfig。参考下图，或者手动创建在浏览器中打开https://raw.githubusercontent.com/facebook/react-native/master/.flowconfigURL复制内容创建文件ReactNativeAppDemo配置相关内容1.添加“star”t":"nodenode_modules/react-native/local-cli/cli.jsstart"修改前和修改后package.json文件下的scripts标签2.在项目中添加index.android.js文件'usestrict';importReactfrom'react';import{AppRegistry,StyleSheet,Text,View}from'react-native';classHelloWorldextendsReact.Component{render(){return(你好，世界)}}varstyles=StyleSheet.create({container:{flex:1,justifyContent:'center',},hello:{fontSize:20,textAlign:'center',margin:10,},});AppRegistry.registerComponent('HelloWorld',()=>HelloWorld);至此，Reactnative配置基本完成3.Appbuild.gradle配置依赖{...compile"com.facebook.react:react-native:+"//Fromnode_modules.}注意这里不要使用maven，因为我们使用的是我们本地的node_modules。注意***版本支持23版本，appcompat-v7:23.0.1,和24还没有试过api整个项目build.gradle配置allprojects{repositories{...maven{//AllofReactNative(JS,Androidbinaries)isinstalledfromnpmurl"$rootDir/node_modules/react-native/android"}}...}在AndroidManifest.xml中添加：确保ExternalLibraries是最新的，比如确保是0.34。1andNot0.20.1，如果出现请检查maven{`url"$rootDir/../node_modules/react-native/android"`//地址是否正确}并修改url"$rootDir*/..*/node_modules/react-Native/android”将本机代码添加到url“$rootDir/node_modules/react-native/android”。官方版本提供了一种更简单的方法。是的，继承就到这里了，我们还需要对其进行自定义。否则，Application会在运行时报错。不信可以试试。ReactNative集成到现有项目中完成！！！等不及要运行了！！在Terminal中运行npmstart，见下图说明react-native启动运行成功后发现如下错误：CouldnotgetBatchedBridge，确保你的bundle打包正确。不要紧张，因为捆绑包没有打包。找不到编译打包的js文件。其实androidstudio默认搜索js文件地址和react-native自带工具编译使用的地址是不一样的。解决方法：进入项目，在android/app/src/main下新建assets目录。执行以下命令$>react-nativestart>/dev/null2>&1&$>curl"http://localhost:8081/index.android.bundle?platform=android"-o>"app/src/main/assets/index.android.bundle"在项目根目录下执行$>(cdprojectname/&&./gradlewassembleDebug)将创建的apk安装到android设备上方法二进入项目，在android/app/src/main下新建assets目录启动服务器$>react-nativestart$>react-nativebundle--platformandroid--devfalse--entry-fileindex.android.js--bundl在assets文件夹下会生成index.android.bundle文件，将创建的apk文件安装到android设备上方法三进入项目，在android/app/src/main下新建assets目录并配置如下package.json中的代码“脚本”：{“开始”：“nodenode_modules/react-native/local-cli/cli.jsstart”，“bundle-android”：“react-nativebundle--platformandroid--devfalse--entry-fileindex.android.js--bundle-outputapp/src/main/assets/index.android.bundle--sourcemap-outputapp/src/main/assets/index.android.map--assets-destandroid/app/src/main/res/"}，我个人推荐使用方法3，方法3不能解决推荐方法2手动执行修改刚才的package.json文件如果真机（模拟器）需要执行adbreversecp:8081tcp:8081，一定要连接到网络！！快乐让我们发展！其他可能的问题ReactNativeiscompatiblewith64-bitAndroidphoneslibgnustl_shared.so"is32-bitinsteadof64-bit类似的错误解决方法在项目根目录的gradle.properties中添加一行android.useDeprecatedNdk=true。添加以下是build.gradle文件中的代码android{...defaultConfig{...ndk{abiFilters"armeabi-v7a","x86"}packagingOptions{exclude"lib/arm64-v8abrealm-jni.so"}}}Genymotionemulator运行显示没有连接开发服务器，如下图，首先检查是否连接网络，在emulator中点击Menu菜单，弹出下图，点击DevSettings4.点击DebugServerhost&portfordeviceunderDebugging填写地址和端口
