android rn动态技术,ReactNative入门之android与rn初始化参数的传递

1、基本理念

RN APP本质上也是原生APP,只是在原生APP中加入了React Native视图的支持。

因此获取RN APP的启动参数的方法原生APP是一样的,获取启动参数后再通过合适的方法传递给RN视图。

如何获得启动参数,不要再搜索RN如何获得启动参数,直接参考原生APP获得启动参数的文章。

可以参考这个例子:

ndroid中一个APP启动另一个APP并传递参数

本文重点说明如何将启动参数传递给React Native代码。

2、ReactNative的Ativity继承关系

MainActivity --> ReactActivity --> Activity

3、参数传递的原理及实现

下面重点介绍如何将获取的启动参数传递给RN视图。

重点阅读 ReactActivity 类中的如下代码:

public abstract class ReactActivity extends Activity

implements DefaultHardwareBackBtnHandler, PermissionAwareActivity {

//定义私有变量mDelegate

private final ReactActivityDelegate mDelegate;

//在构造函数中创建mDelegate

protected ReactActivity() {

mDelegate = createReactActivityDelegate();

}

//创建mDelegate的方法,这里注释很清楚,可以重写该方法并自定义delegate

/**

* Called at construction time, override if you have a custom delegate implementation.

*/

protected ReactActivityDelegate createReactActivityDelegate() {

return new ReactActivityDelegate(this, getMainComponentName());

}

//关键的地方,mDelegate.loadApp创建了React Native视图,并传入参数。

//具体见mDelegate.loadApp的代码。

protected final void loadApp(String appKey) {

mDelegate.loadApp(appKey);

}

loadApp方法所调用的mDelegate.loadApp 方法,是创建React 视图并传入参数的核心代码所在:

public class ReactActivityDelegate {

//....

protected void loadApp(String appKey) {

if (mReactRootView != null) {

throw new IllegalStateException("Cannot loadApp while app is already running.");

}

mReactRootView = createRootView();

mReactRootView.startReactApplication(

getReactNativeHost().getReactInstanceManager(),

appKey,

getLaunchOptions());

getPlainActivity().setContentView(mReactRootView);

}

//....

}

注意: startReactApplication函数的最后一个参数getLaunchOptions()返回值是传给ReactView的参数,我们要在这里把启动参数传入。看看getLaunchOptions()的实现:

protected @Nullable Bundle getLaunchOptions() {

return null;

}

什么也没返回,这简直太好了,我们只要在这里把我们的初始化参数给他就行了。

以上都是基础原理的准备,如果觉得有些晦涩,直接看如下的具体实现代码就可以了。

public class MainActivity extends ReactActivity {

//重写这个方法,返回自定义的delegate.

@Override

protected ReactActivityDelegate createReactActivityDelegate() {

return new MyReactDelegate(this,getMainComponentName());

}

//自定义MyReactDelegate

class MyReactDelegate extends ReactActivityDelegate {

public MyReactDelegate(Activity activity, @javax.annotation.Nullable String mainComponentName) {

super(activity, mainComponentName);

}

//重点是重写这个方法,把启动参数在这里准备好。

@javax.annotation.Nullable

@Override

protected Bundle getLaunchOptions() {

//获取传入的参数

Intent intent = getIntent();

String data_str = intent.getStringExtra("data");

Bundle bundle = new Bundle();

//bundle.putString("bundle","android传递的初始化参数");

bundle.putString("data",data_str);

return bundle;

}

}

}

4、在ReactView中使用参数

在React Native 代码的render方法中使用传入的参数:

render() {

var initProps = this.props.bundle;

return( );

}

结束

本文整理自:

ReactNative入门之android与rn初始化参数的传递

原作写的很好~~~ 我这里只是整理,便于以后学习参考。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值