安卓集成 react native

最新推荐文章于 2023-01-18 15:09:31 发布
村里最靓的码农
最新推荐文章于 2023-01-18 15:09:31 发布
阅读量310
点赞数
分类专栏： react native
react native 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
 
 
  
  
   
   背景

   
   

    
    

   
   
   
    


   
   

   
   集成步骤

   
   

    
    参考官方文档->react native 文档

本文使用开发环境 Android studio

注意最新的React Native支持的最新的SDK为16（android4.1）

npm环境，小伙伴们自己安装 nodeJS自己安装，可以参考官方文档安装环境， 

   
   

   
   创建Android项目（已有项目跳过）

   
   
打开Android studio



     
     

      
       
        
        
         
        
      

      
      
        14752189589833.jpg 
      

     
     


输入项目名称，选择项目目录，点击next



     
     

      
       
        
        
         
        
      

      
      
        14752190447690.jpg 
      

     
     



     
     

      
       
        
        
         
        
      

      
      
        14752191238908.jpg 
      

     
     



     
     

      
       
        
        
         
        
      

      
      
        14752192158859.jpg 
      

     
     



     
     

      
       
        
        
         
        
      

      
      
        14752193112367.jpg 
      

     
     



   
   至此项目创建完成（需要注意的是最新的React Native支持最新SDK版本为16 android4.1）

   
   React Native集成到上面我们创建的ReactNativeAPPDemo中

   
   参考Facebook react native文档

   
   


进入项目根目录，添加JS到项目中-点击Android studio中的Terminal（如下图）
     
     

      
       
        
        
         
        
      

      
      
        14752200412681.jpg 
      

     
     



   
   分别执行一下语句

   
     npm init
  npm install --save react react-native
  curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

   
   init 主要根据提醒生成package.json文件
install --save react react-native 安装React 和React Native
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 下载.flowconfig文件
参考图片
   
   
    
    
     
     
     
     
      
      
     
     
    
    
    
    
     
     14752207192510.jpg
    
    
   
   
   
   
   
   查看项目中有node_modules，说明react和react native 安装完成
   
   
    
    
     
     
     
     
      
      
     
     
    
    
    
    
     
     14752214758622.jpg
    
    
   
   
   
   在项目根目录添加.flowconfig
   
   参考下图
   
   

   
   
    
    
     
     
     
     
      
      
     
     
    
    
    
    
     
     14752216108448.jpg
    
    
   
   
   
   也可以手动创建在浏览器打开https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig网址复制内容创建文件

   
   
    
    
     
     
     
     
      
      
     
     
    
    
    
    
     
     14752217925862.jpg
    
    
   
   
   
   
   
   ReactNativeAppDemo配置相关内容
   
   添加"start": "node node_modules/react-native/local-cli/cli.js start" 到package.json 文件下 scripts标签 修改前

     
     
      
       
        
        
         
        
      
      
      
        14752220951994.jpg 
      
     
     

修改后

     
     
      
       
        
        
         
        
      
      
      
        14752221462812.jpg 
      
     
     
   
   添加index.android.js文件到项目中


     
     
      
       
        
        
         
        
      
      
      
        14752222197635.jpg 
      
     
     
     
     
   
       'use strict';
    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);

   
   至此React native配置基本完成
   
   App build.gradle配置
   
   
   
   dependencies {
    ...
    compile "com.facebook.react:react-native:+" // From node_modules.
}

   
   这里注意不要使用maven中的，因为我们使用的是我们本地node_modules中的，注意最新版本中支持的是23，appcompat-v7:23.0.1，暂时没有试24的api

   
   
    
    
     
     
     
     
      
      
     
     
    
    
    
    
     
     14752229775637.jpg
    
    
   
   
   
   
   
   整个工程build.gradle配置
   
   
   
   allprojects {
    repositories {
        ...
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
    ...
}

   
   
    
    
     
     
     
     
      
      
     
     
    
    
    
    
     
     14752256546683.jpg
    
    
   
   
   
   添加<uses-permission android:name="android.permission.INTERNET" />到AndroidManifest.xml:
确定External Libraries


     
     
      
       
        
        
         
        
      
      
      
        14752240537114.jpg 
      
     
     


     
     
      
       
        
        
         
        
      
      
      
        14752241070972.jpg 
      
     
     
   
   确定是下是最新的，例如确定是0.34.1而不是0.20.1，如果出现请检查
   
     maven {
            `url "$rootDir/../node_modules/react-native/android"`//地址是否正确
        } 
 修改url "$rootDir*/..*/node_modules/react-native/android"为url "$rootDir/node_modules/react-native/android"

   
   添加native code
   
   官方给出的
   
   

   
   
    
    
     
     
     
     
      
      
     
     
    
    
    
    
     
     14752232872479.jpg
    
    
   
   
   
   到时最新版本中提供了更加简单的方式，没错就是继承。
   
   
    
    
     
     
     
     
      
      
     
     
    
    
    
    
     
     14752258065933.jpg
    
    
   
   
   
   在这里我们也需要自定义一个Application否则 运行时会报错，不信的小伙伴可以试一试
   
   

   
   
    
    
     
     
     
     
      
      
     
     
    
    
    
    
     
     14752259787709.jpg
    
    
   
   
   
   
    
    
     
     
     
     
      
      
     
     
    
    
    
    
     
     14752260351714.jpg
    
    
   
   
   
   到此为止，ReactNative 集成到已有项目中完成！！！迫不及待的运行试试吧！！
   
   
    
    
     
     
     
     
      
      
     
     
    
    
    
    
     
     14752261248709.jpg
    
    
   
   
   
   在Terminal中运行 npm start，看到下图表示启动成功
   
   
    
    
     
     
     
     
      
      
     
     
    
    
    
    
     
     14752261852021.jpg
    
    
   
   
   
   运行以后发现如下错误
   
   

   
   
    
    
     
     
     
     
      
      
     
     
    
    
    
    
     
     14752468221176.jpg
    
    
   
   
   
   react-native报错：Could not get BatchedBridge, make sure your bundle is packaged correctly
莫紧张，这是因为bundle没有打包好。找不到编译打包后的js文件。其实就是android studio默认的寻找js文件地址和react-native自己的工具编译所使用的地址不同。
   
   解决方法
   
   方法一
   
   进入项目，在android/app/src/main下新建assets目录。执行以下命令
   
   $> react-native start > /dev/null 2>&1 &  
$> curl "http://localhost:8081/index.android.bundle?platform=android" -o
> "app/src/main/assets/index.android.bundle"

   
   在项目根目录下执行
   
   <!--$> (cd android/ && ./gradlew assembleDebug)-->
$> (cd 项目名称/ && ./gradlew assembleDebug)

   
   把创建的apk安装到android设备
   
   方法二
   
   进入项目，在android/app/src/main下新建assets目录
启动服务器
   
   $>react-native start
$>react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/

   
   在assets文件夹下会生成index.android.bundle文件，把创建的apk文件安装到android设备
   
   方法三
   
   进入项目，在android/app/src/main下新建assets目录
在package.json中配置下面代码
   
   "scripts": {
    "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 app/src/main/assets/index.android.bundle --sourcemap-output app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/"
  },

   
   个人推荐使用方法三,方法三解决不了推荐方法二 手动执行
修改刚刚的package.json文件
   
   

   
   
    
    
     
     
     
     
      
      
     
     
    
    
    
    
     
     14752486039953.jpg
    
    
   
   
   
   如果真机(模拟器)需要执行
   
   adb reverse tcp:8081 tcp:8081

   
   一定要确定连接网络哦！！
   
   
    
    
     
     
     
     
      
      
     
     
    
    
    
    
     
     14752520319630.jpg
    
    
   
   
   
   
    
    
     
     
     
     
      
      
     
     
    
    
    
    
     
     14752520729313.jpg
    
    
   
   
   
   开心的进行开发吧！
   
   其他可能遇到的问题
   
   ReactNative兼容64位Android手机
   
   libgnustl_shared.so" is 32-bit instead of 64-bit类似错误
   
   解决方法
   
   在项目的根目录的 gradle.properties 里面添加一行代码
   
   
   
   在 build.gradle 文件里添加以下代码
   
   android {
    ...
    defaultConfig {
        ...
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }

        packagingOptions {
            exclude "lib/arm64-v8a/librealm-jni.so"
        }
    }
}

   
   最后感谢
   
   
    
    
   
   
   
   http://majing.io/questions/589
http://www.cnblogs.com/tony-yang-flutter/p/5864578.html
https://blog.yourtion.com/update-react-native-029-bug.html
http://stackoverflow.com/questions/38870710/error-could-not-get-batchedbridge-make-sure-your-bundle-is-packaged-properly/38874952
http://blog.csdn.net/b992379702b/article/details/52234479
   
   
        ######   Genymotion模拟器运行显示没有连接到developement server如下图

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1018012-afeaad419ff40114.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

1. 先检查是否连接到网络
2. 点击模拟器中Menu菜单弹出下面图片，点击Dev Settings
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1018012-024b1022595244ee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3. 点击Debugging 下面的`Debug Server host & port for device`填写地址和端口
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1018012-e2bce20ef25911b9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1018012-4008a5d1c3b7f4ec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



>上文中使用到的项目ReactNativeAPPDemo链接: https://pan.baidu.com/s/1i4GkeKt 密码: vwym


最近小伙伴反馈0.39.0上面没有ReactApplication接口，请看我的截图有问题QQ联系我共同探讨
>我的项目中依然可以看到，是不是有的小伙伴gradle文件配置的问题，仔细检查下，确实有问题的小伙伴，请加QQ私聊
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1018012-d1fbebf0e6df6f66.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



###### 升级ReactNative
> 由于ReactNative 更新比较频繁，有的时候我们的项目需求根据情况，需要升级到最新或者指定版本的ReactNative，下面给大家介绍下。


1. 安装git（如果安装git请求跳过）
    > 下载并安装[git](https://git-scm.com/downloads)
2. 在命令行执行命令
    > npm install -g react-native-git-upgrade
    > react-native-git-upgrade
3. 更新项目ReactNative依赖
    > 通过命令：npm info react-native 查看ReactNative版本
    > npm install --save react-native@X.Y 安装指定版本，X.Y是npm info react-native 查看到的ReactNative版本
4. 更新 react-native upgrade

### 发布Demo 到github Demo  欢迎大家提问交流
  > [ReactNativeAppDemo](https://github.com/zdl411437734/ReactNativeAppDemo)
> [提问](https://github.com/zdl411437734/ReactNativeAppDemo/issues)

关注公众号获取更多内容和反馈沟通
![Paste_Image.png -w200](http://upload-images.jianshu.io/upload_images/1018012-c8bfc8d8d233e9eb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

>转载请注明出处：http://www.jianshu.com/p/22aa14664cf9https://www.jianshu.com/p/22aa14664cf9?open_source=weibo_search
村里最靓的码农
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
安卓集成 react native

背景React Native出来已经一段时间了，相对来说也算稳定了，在很多的企业中都实际使用他们，混合开发已经是未来的一种趋势，混合开发中使用的技术很多，不外乎Html5、JS框架通过一定的技术和原始交互，目前主流混合开发React Native、Cordova、APICloud、MUI、AppCan、Sencha Touch、jQuery Mobile等等（其他的小伙伴们自己收集），目前网上
复制链接

扫一扫