React Native移植原生Android

发布时间：2020-12-15 08:26:05 所属栏目：百科来源：网络整理

导读：(一)前言之前已经写过了有关React Native移植原生Android项目的文章，不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题，对于初学者来讲还是会有很多疑难的困惑的,而且官方的文档移植没有更新，最新版本集成方法已经发生很大变化啦~OK,今天我

(一)前言

之前已经写过了有关React Native移植原生Android项目的文章，不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题，对于初学者来讲还是会有很多疑难的困惑的,而且官方的文档移植没有更新，最新版本集成方法已经发生很大变化啦~OK,今天我们用新版本进行走一遍流程，具体原来就不讲了，直接看移植步骤。

有关原理相关的知识点大家可以查看:http://www.lcode.org/?p=292

刚创建的React Native交流6群:426762904,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

(二)前提准备工作

①.首先我们有一个采用Gradle构建的Android应用项目，这个大家直接采用Android Studio进行创建一个项目即可。我这边新建一个目录TestInte，然后采用Android Studio创建一个android项目在该文件夹下面。具体如下:

②.电脑必须安装Node.js，具体安装使用方法(点击进入)

(三)Android项目相关配置

2.1 在我们Android项目的build.gradle中添加React Native依赖，然后同步，具体代码如下:

 
   ? 
  
        compile  
        'com.facebook.react:react-native:+'

2.2紧接着我们需要在项目AndroidManifest.xml中加入网络访问权限

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

该仅仅用于开发阶段从开发服务器加载最细的JavaScript代码，在正式发布版本中，如果有需要可以把该网络权限删掉。

(四)添加原生代码

在Android项目的MainActivity中，我们需要配置相关代码来进行启动运行React Native库。我这边直接采用>=0.18版本的写法了,

具体代码如下:

        1 
      
        2 
      
        3 
      
        4 
      
        5 
      
        6 
      
        7 
      
        8 
      
        9 
      
        10 
      
        11 
      
        12 
      
        13 
      
        14 
      
        15 
      
        16 
      
        17 
      
        18 
      
        19 
      
        public 
        class 
        MainActivity  
        extends 
        ReactActivity { 
       
        @Override 
       
        protected 
        String getMainComponentName() { 
       
        return 
        "testinte" 
        ; 
       
        } 
       
        @Override 
       
        protected 
        boolean 
        getUseDeveloperSupport() { 
       
        return 
        BuildConfig.DEBUG; 
       
        } 
       
        @Override 
       
        List<ReactPackage> getPackages() { 
       
        Arrays.<ReactPackage>asList( 
       
        new 
        MainReactPackage() 
       
        ); 
       
        } 
       
        }

到此为止我们的Android项目Activity和配置文件以及完成了最基本的配置方法了。

(五)添加js

下面我们采用命令行，首先切换到项目的根目录上面(我的例子是切换到TestIntegrating目录下)

5.1.命令行运行npm init 运行截图如下:

该命令会创建一个package.json文件，并且提示我们输入一些信息，默认不输入即可，不过name必须要为全英文小写哦，具体结果执行结果如下:

5.2.接下来我们在在scripts标签那边添加如下代码:

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

以及添加react依赖:"react": "15.0.2"和react-native依赖:"react-native": "^0.26.3",sans-serif; font-size: 14px;">[注意].不要问我为什么知道这样配置的，你init一个项目就知道了…根据本地最新的依赖版本信息复制进去就可以啦

5.3.然后在项目根目录下面执行npm install安装依赖模块,安装记录截图如下:

如果这样觉的嫌麻烦了，当然了还记得上面如果你重新init一个项目，直接把node_modules文件夹复制进行呗

5.4.curl -o .flowconfighttps://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

做一下flow配置

5.5.到这里其实已经差不多了，不过我们看上面的build.gradle文件中的配置compile 'com.facebook.react:react-native:+' 如果直接这样的话，官方会去下载已经提交到0.20.1版本，所以我们这边还是需要做一些配置，让它可以加载我们node_modules文件夹中react-native本地最新版本库。具体修改文件路径:android/build.gradle

allprojects {

 
        repositories { 
       

 
        jcenter() 
       

 
        maven { 
       

 
        // All of React Native (JS,Obj-C sources,Android binaries) is installed from npm

 
        url  
        "$projectDir/../../node_modules/react-native/android"

}

}

新增maven库地址到本地库即可
5.6.现在我们创建一下文件命名为:index.android.js，然后在里边添加如下代码:

        19 
      
        20 
      
        21 
      
        22 
      
        23 
      
        24 
      
        25 
      
        26 
      
        27 
      
        28 
      
        29 
      
        30 
      
     'use strict' 
        ; 
       
        import 
        React from  
        'react' 
        ; 
       
        { 
       
        AppRegistry, 
       
        StyleSheet, 
       
        Text, 
       
        View 
       
        } from  
        'react-native' 
        ; 
       
        MyAwesomeApp  
        React.Component { 
       
        render() { 
       
        ( 
       
        <View > 
       
        <Text style={styles.hello}>Hello,World</Text> 
       
        <Text style={styles.hello}>恭喜你已经完成React Native移植Android项目</Text> 
       
        <Text style={styles.hello}>博客地址:www.lcode.org</Text> 
       
        </View> 
       
        ) 
       
        } 
       
        } 
       
        var styles = StyleSheet.create({ 
       
        hello: { 
       
        fontSize:  
        20 
        , 
       
        textAlign:  
        'center' 
         
        margin:  
        10 
         
        }, 
       
        }); 
       
AppRegistry.registerComponent('testinte'以上就完成了所有的相关代码以及react-native配置了，注意上上面的都采用testinte了，希望大家都用一样的名字和前面MainActivity进行统一哦。
(六)运行APP上面的配置步骤全部完成了，下面我们要运行APP了，首先我们需要开启开发服务器，使用如下命令即可:npm start
运行结果如下:
接下来就是最后一步了，直接运行react-native run-android命令编译运行应用就可以了，运行结果如下:
这样就完成了一个简单的Android原生项目移植到React Native中了。
【注意事项】.感谢热心童鞋的回复,大家可能会遇到评论区中找不到.so文件的问题
具体解决方案:http://www.jianshu.com/p/67c574236e8f
解决方案方案:
找不到.so 库错误 解决办法是 在项目中的 build.gradle 文件中添加

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