• 【React Native开发】React Native移植原生Android项目(4)


    转载请标明出处:

    http://blog.csdn.net/developer_jiangqq/article/details/50519677

    本文出自:【江清清的博客】


    ()前言       

           【好消息】个人站点已经上线执行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org

             前三节课程我们已经对于React Native For Android的环境搭建。IDE安装配置以及应用执行。调试相关的知识点做了解说。今天我们来讲一个非常实用的知识点。

    移植我们已有的原生Android项目到React Native中。

             刚创建的React Native技术交流3群(496508742),React Native技术交流4群(458982758),请不要反复加群!欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

    在React Native中React事实上很多其它关注的是视图View层。所以React Native本身也支持而且能够让我们非常easy方便的移植一个Android原生的项目到React Native中。

    ()前提准备工作 

              ①.首先我们有一个採用Gradle构建的Android应用项目,这个大家直接採用Android Studio进行创建一个项目就可以。我这边新建一个文件夹TestHello。然后採用Android Studio创建一个android项目在该文件夹以下。详细例如以下:

              ②.电脑必须安装Node.js。详细安装用法(点击进入)

    ()Android项目相关配置

            2.1 在我们Android项目的build.gradle中加入React Native依赖,然后同步。详细代码例如以下:

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

    [注意].该会同步0.17版本号以上的react native,官方的版本号还是停留在0.13没有更新,我本地的reactnative0.17版本号的,所以大家这边配置一定要跟自己本地的版本号保持一致或者更新。

    关于这个问题今天我下午研究了一下去,踩了非常多坑啊~~ 只是ReactNative中文网那边我已经让站长更新了版本号。

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

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

    该只用于开发阶段从开发server载入最细的JavaScript代码,在正式公布版本号中,假设有须要能够把该网络权限删掉。

    ()加入原生代码

             在Android项目的MainActivity中,我们须要配置相关代码来进行启动执行React Native库。

    我们须要创建ReactRootView,然后在里边渲染React引用,而且设置成Activity的主视图就可以。

    详细代码例如以下:

    public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
        privateReactRootView mReactRootView;
        privateReactInstanceManager mReactInstanceManager;
     
        @Override
        protectedvoid onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
     
           mReactRootView = new ReactRootView(this);
           mReactInstanceManager = ReactInstanceManager.builder()
                   .setApplication(getApplication())
                   .setBundleAssetName("index.android.bundle")
                   .setJSMainModuleName("index.android")
                   .addPackage(new MainReactPackage())
                   .setUseDeveloperSupport(BuildConfig.DEBUG)
                   .setInitialLifecycleState(LifecycleState.RESUMED)
                   .build();
           mReactRootView.startReactApplication(mReactInstanceManager, "TestHello",null);
     
           setContentView(mReactRootView);
        }
     
        @Override
        publicvoid invokeDefaultOnBackPressed() {
           super.onBackPressed();
        }
    }

           注意以下的代码:

    mReactRootView.startReactApplication(mReactInstanceManager,"TestHello", null);

            以上当中方法另外一种个參数我这边採用TestHello来进行命名了,注意这个要和后面讲到的东西进行统一,详细我们继续往下看。

           在React Native中,事实上FB给我们提供了ReactInstanceManger来替我们管理Activity相关的生命周期。所以我们须要传递一些Actitivty相关的生命周期到ReactInstanceManger中。详细代码onPause()和onResume()方法例如以下:

    @Override
        protectedvoid onPause() {
           super.onPause();
     
            if(mReactInstanceManager != null) {
               mReactInstanceManager.onPause();
            }
        }
        @Override
        protectedvoid onResume() {
           super.onResume();
     
            if(mReactInstanceManager != null) {
                mReactInstanceManager.onResume(this,this);
            }
        }

         紧接着对于返回button键的事件我们也须要传递一下:

    @Override
     public void onBackPressed() {
        if(mReactInstanceManager != null) {
           mReactInstanceManager.onBackPressed();
        } else {
           super.onBackPressed();
        }
    }

          这样我们就能够当用户按下返回键的时候,javaScript代码能够做相关处理。当然假设前端不处理响应的事件。那么会回调到上面的invokeDefaultOnBackPressed()方法中。继而回退事件转移到Activity了,以下就是Activity该怎么样执行。就怎么样执行了。默认事件就是关闭Activity了

             最后一步就是须要处理一下设备菜单了。默认情况下我们能够摇晃一下手机来弹出菜单,可是对于模拟器,该方法就不适用了。所以我们才拦截事件方法进行相关处理一下就可以。

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event){
        if(keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
           mReactInstanceManager.showDevOptionsDialog();
           return true;
        }
        return super.onKeyUp(keyCode, event);
    }

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

    ()加入js

            以下我们採用命令行。首先切换到项目的根文件夹上面(我的样例是切换到TestHello文件夹下)

             5.1.命令行执行npm init 执行截图例如以下:


    该命令会创建一个package.json文件。而且提示我们输入一些信息,默认不输入就可以,只是name必须要为全英文小写哦,详细结果执行结果例如以下:


       5.2.命令行执行npm install  --save react-native  进行安装react native模块以及相关node模块。执行截图例如以下:


     这里開始安装node模块以及react native模块,详细执行结果会生成node_module文件夹例如以下:


    5.3.最后执行例如以下命令就可以:

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

    做一下flow配置


            以上三步所有完毕了,上面给我们创建node模块,然后加入了react-native npm依赖。接下来我们须要改动package.json文件。在scripts标签那边加入例如以下代码:

    "start":"node_modules/react-native/packager/packager.sh"

    详细改动截图例如以下:


    5.4.如今我们创建一下文件命名为:index.android.js,然后在里边加入例如以下代码:

    'use strict';
    var React = require('react-native');
    var {
      Text,
      View
    } = React;
     
    class MyAwesomeApp extends React.Component {
      render() {
        return (
         <View style={styles.container}>
           <Text style={styles.hello}>Hello, World</Text>
         </View>
        )
      }
    }
    var styles = React.StyleSheet.create({
      container:{
        flex: 1,
        justifyContent:'center',
      },
      hello: {
        fontSize:20,
       textAlign: 'center',
        margin:10,
      },
    });
     
    React.AppRegistry.registerComponent('TestHello', ()=> TestHello);

             以上就完毕了所有的相关代码以及react-native配置了,注意上面的都採用TestHello了。希望大家都用一样的名字和前面MainActivity进行统一哦。

    ()执行APP

             上面的配置步骤所有完毕了,以下我们要执行APP了。首先我们须要开启开发server。使用例如以下命令就可以:

    npm start

    执行结果例如以下:


            接下来就是最后一步了,直接执行react-native run-android命令编译执行应用就能够了,执行结果例如以下:


    这样就完毕了一个简单的Android原生项目移植到ReactNative中了。

    ()最后总结

              今天移植Android原生项目移植到React Native中。期间也遇到了非常多问题,比如由于官网的文档没有保持最新,后来经过排查踩坑才发现。大家有问题能够加一下群React Native技术交流群(282693535)或者底下进行回复一下。

              尊重原创,转载请注明:From Sky丶清(http://blog.csdn.net/developer_jiangqq) 侵权必究!

              关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)

    关注我的微博,能够获得很多其它精彩内容

  • 相关阅读:
    andorid自己定义ViewPager之——子ViewPager滑到边缘后直接滑动父ViewPager
    MTK Camera驱动移植
    云计算VDI相关职位招聘
    Android内存泄露之开篇
    关于ping以及TTL的分析
    STL之关联容器的映射底层
    STL非变易算法
    自己主动更新 -- 版本比較(2)
    activiti自己定义流程之Spring整合activiti-modeler5.16实例(四):部署流程定义
    合并多个文本文件方法
  • 原文地址:https://www.cnblogs.com/gccbuaa/p/7246176.html
Copyright © 2020-2023  润新知