【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本身也支持并且可以让我们非常简单方便的移植一个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" />

该仅仅用于开发阶段从开发服务器加载最细的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);
        }
    }

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

@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了,首先我们需要开启开发服务器,使用如下命令即可:

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),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)

关注我的微博,可以获得更多精彩内容

评论 23
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值