Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >ReactNative For Android 框架启动核心路径剖析

ReactNative For Android 框架启动核心路径剖析

原创
作者头像
QQ空间开发团队
修改于 2017-11-01 03:40:29
修改于 2017-11-01 03:40:29
5.7K0
举报

作者:王少鸣

前面给大家分析过 ReactNative For Android (RN4A) 的通信机制,这次我们从源码出发,分析下RN4A的启动过程。启动过程基于通信机制,涉及通信机制原理大家可以查看前一篇文章,本篇不赘述。

上面是2016 React.js Conf FB 工程师分享的RN启动时序图,整个过程比较清晰,先启动终端运行时,随后由终端上下文去启动JS的运行时,进而布局,最后再由终端进行渲染,最后将View添加到RootView上。那接下来,我们先理解几个概念,方便后续我们对整个启动过程的理解。

模块:

模块即暴露给调用方的API集合,在RN4A存在两种模块。

一种是Native层暴露给Js层的API集合模块,即NativeModule,如ToastModule,DialogModule,或是创建View的UIManagerModule。业务方可以通过实现NativeModule自定义模块,通过重写getName将模块名暴露给Js层,通过注解的方式将API暴露给Js层调用。

另一种是Js层暴露给Java层的API集合模块,即JavascriptModule,如DeviceEventEmitter,AppRegistry等。业务方可以通过继承JavaScriptModule接口自定义接口模块,申明与Js层相应的方法即可。

无论是NativeModule还是JavascriptModule,在Js层存在与之相互映射同名的Module,Js层通过require引用Module。

模块注册表:

各模块信息统一收集到模块注册表。同样,在RN4A中存在两种模块注册表,一是由集合所有Java层模块接口信息的NativeModuleRegistry,另一种是集合所有Js层模块接口信息的JavascriptModuleRegistry。在启动RN4A后,终端将注册表信息存入与前端互通的全局变量__fbBatchedBridgeConfig 中,使得Js层与Java层存在同样的模块注册表。

正如上面FB攻城狮提出的时序图,从终端启动,入口是ReactRootView.startReactApplication,在构造JavaScriptExecutor&JSBundleLoader后,进而通过ReactContextInitAsycnTask去创建ReactContext,这部分主要创建了NativeModules,JavaScriptModule及其对的注册表,负责Js与Java通信的高层接口CatalystInstance等。在创建完ReactContext后,通过CatalystInstance获取AppRegistry并调用其runApplication启动Js Application。整体流程如下:

接下来进入正题,从源码来分析RN4A的启动(为阅读方便,源码适当裁剪)

ReactInstanceManager createReactContextInBackground,通过AysncTask初始化ReactNative上下文。mJSModuleName是与前端约定好所要启动的JS Application Name。mLauncahOptions是终端启动前端Application可选的传入的参数。

代码语言:txt
AI代码解释
复制
/**
 * ReactRootView.java
 */
public void startReactApplication(
    ReactInstanceManager reactInstanceManager,
    String moduleName,
    @Nullable Bundle launchOptions) {
  UiThreadUtil.assertOnUiThread();

  mReactInstanceManager = reactInstanceManager;
  mJSModuleName = moduleName;
  mLaunchOptions = launchOptions;

  if (!mReactInstanceManager.hasStartedCreatingInitialContext()) {
    mReactInstanceManager.createReactContextInBackground();
  }

  if (mWasMeasured && mIsAttachedToWindow) {
    mReactInstanceManager.attachMeasuredRootView(this);
    mIsAttachedToInstance = true;
    getViewTreeObserver().addOnGlobalLayoutListener(getKeyboardListener());
  } else {
    mAttachScheduled = true;
  }
}

createReactContextInBackground最终调用到recreateReactContextInBackgroundFromBundleFile。这里会创建两个Key Obj : JSCJavaScriptExecutor&JSBundleLoader。

JSCJavaScriptExecutor继承自JavaScriptExecutor,在JSCJavaScriptExecutor.class加载会加载ReactNative的SO,并且,在初始JSCJavaScriptExecutor时会调用initialze去初始C++层ReactNative与JSC的通信框架等。

JSBundleLoader缓存了JsBundle的信息,封装了上层加载JsBundle相关接口,CatalystInstance通过其间接调用ReactBridge去加载文件。

代码语言:txt
AI代码解释
复制
/**
 * ReactInstanceManagerImpl.java
 */
private void recreateReactContextInBackgroundFromBundleFile() {
  recreateReactContextInBackground(
      new JSCJavaScriptExecutor.Factory(),
      JSBundleLoader.createFileLoader(mApplicationContext, mJSBundleFile));
}

创建完JSCJavaScriptExecutor&JSBundleLoader后,execute ReactContextInitAsyncTask继续初始化ReactContext。

代码语言:txt
AI代码解释
复制
/**
 * ReactInstanceManagerImpl.java
 */
private void recreateReactContextInBackground(
    JavaScriptExecutor.Factory jsExecutorFactory,
    JSBundleLoader jsBundleLoader) {

  ReactContextInitParams initParams =
      new ReactContextInitParams(jsExecutorFactory, jsBundleLoader);
  if (!mIsContextInitAsyncTaskRunning) {

    ReactContextInitAsyncTask initTask = new ReactContextInitAsyncTask();
    initTask.execute(initParams);
    mIsContextInitAsyncTaskRunning = true;
  } else {
    mPendingReactContextInitParams = initParams;
  }
}

ReactContextInitAsyncTask为创建ReactContext的核心类,在执行初始化前会销毁先前的上下文,保证只存在一个上下文。随后,调用createReactContext进一步创建ReactContext。在创建完React Context后会调用setUpReactContext,进而通知DevSupportManager更新上下文,更新生命周期,将ReactRootView做为Root View传递给UIManagerModule,调用AppRegistry的runApplication去启动Js Application等。

代码语言:txt
AI代码解释
复制
/**
 * ReactInstanceManagerImpl$ReactContextInitAsynTask.java
 */
private final class ReactContextInitAsyncTask extends
    AsyncTask<ReactContextInitParams, Void, Result<ReactApplicationContext>> {
  @Override
  protected void onPreExecute() {
    if (mCurrentReactContext != null) {
      tearDownReactContext(mCurrentReactContext);
      mCurrentReactContext = null;
    }
  }

  @Override
  protected Result<ReactApplicationContext> doInBackground(ReactContextInitParams... params) {
    Assertions.assertCondition(params != null && params.length > 0 && params[0] != null);
    try {
      JavaScriptExecutor jsExecutor = params[0].getJsExecutorFactory().create();
      return Result.of(createReactContext(jsExecutor, params[0].getJsBundleLoader()));
    } catch (Exception e) {
      // Pass exception to onPostExecute() so it can be handled on the main thread
      return Result.of(e);
    }
  }

  @Override
  protected void onPostExecute(Result<ReactApplicationContext> result) {
    try {
      setupReactContext(result.get());
    } catch (Exception e) {
      mDevSupportManager.handleException(e);
    } finally {
      mIsContextInitAsyncTaskRunning = false;
    }

    // Handle enqueued request to re-initialize react context.
    if (mPendingReactContextInitParams != null) {
      recreateReactContextInBackground(
          mPendingReactContextInitParams.getJsExecutorFactory(),
          mPendingReactContextInitParams.getJsBundleLoader());
      mPendingReactContextInitParams = null;
    }
  }
}

在CreateReactContext中,主要有以下5个key path:

  1. 通过Builder构建上文概念讲过的NativeModuleRegistry及JavaScriptModuleConfig;
  2. 创建ReactApplicationContext。ReactApplicationContext继承自ContextWrapper,主要缓存了Application Context,Activity Context,ReactNative处理消息的三个thread(下篇讲述),还有就是全局控制JS调用导致Native Module Crash的NativeModuleCallExceptionHandler,在初始化ReactInstanceManager的时候传入,并且要关闭DeveloperSupport后才可以启用,假如不传,则默认交由DevSupportManger去处理;
  3. 创建ReactPackage。ReactPackage主要通过createNativeModules、createJSModules和createViewManagers等API去创建本地模块,JS模块及视图组件等。ReactPackage分为framework的CoreModulesPackage和业务方可选的基础MainReactPackage,CoreModulesPackage封装了大部分通信,调试核心类,如UIManagerModule,这个负责控制Js层Dom到Native View的核心类;
  4. 创建CatalystInstance。CatalystInstance并不直接面向开发者,开发者通ReactInstanceManger间接操作CatalystInstance。CatalystInstance持有对ReactBridge的引用,主要通过ReactBridge这个JNI类去实现Java层与Js层的通信,ReactBridge由CatalystInstance的Constructor创建。同时初始化的时候调用了ReactQueueConfigurationSpec.createDefault创建了ReactNative通信的两个线程 JsQueueThread&NativeModulesQueueThread;
  5. 调用reactContext.initializeWithInstance进一步将创建完的CatalystInstance及线程等缓存在ReactContext中;
  6. 调用catalystInstance.runJSBundle加载解析Jsbundle;

代码语言:txt
AI代码解释
复制
/**
 * ReactInstanceManagerImpl.java
 *
 * @return instance of {@link ReactContext} configured a {@link CatalystInstance} set
 */
private ReactApplicationContext createReactContext(
    JavaScriptExecutor jsExecutor,
    JSBundleLoader jsBundleLoader) {
  
  mSourceUrl = jsBundleLoader.getSourceUrl();
  NativeModuleRegistry.Builder nativeRegistryBuilder = new NativeModuleRegistry.Builder();
  JavaScriptModulesConfig.Builder jsModulesBuilder = new JavaScriptModulesConfig.Builder();

  ReactApplicationContext reactContext = new ReactApplicationContext(mApplicationContext);
  if (mUseDeveloperSupport) {
    reactContext.setNativeModuleCallExceptionHandler(mDevSupportManager);
  }
  
  CoreModulesPackage coreModulesPackage =
        new CoreModulesPackage(this, mBackBtnHandler, mUIImplementationProvider);
  processPackage(coreModulesPackage, reactContext, nativeRegistryBuilder, jsModulesBuilder);
  
  for (ReactPackage reactPackage : mPackages) {
      processPackage(reactPackage, reactContext, nativeRegistryBuilder, jsModulesBuilder);
  }
  
  nativeModuleRegistry = nativeRegistryBuilder.build();
  javaScriptModulesConfig = jsModulesBuilder.build();

  NativeModuleCallExceptionHandler exceptionHandler = mNativeModuleCallExceptionHandler != null
      ? mNativeModuleCallExceptionHandler
      : mDevSupportManager;
  CatalystInstanceImpl.Builder catalystInstanceBuilder = new CatalystInstanceImpl.Builder()
      .setReactQueueConfigurationSpec(ReactQueueConfigurationSpec.createDefault())
      .setJSExecutor(jsExecutor)
      .setRegistry(nativeModuleRegistry)
      .setJSModulesConfig(javaScriptModulesConfig)
      .setJSBundleLoader(jsBundleLoader)
      .setNativeModuleCallExceptionHandler(exceptionHandler);
  
  CatalystInstance catalystInstance= catalystInstanceBuilder.build();
  if (mBridgeIdleDebugListener != null) {
    catalystInstance.addBridgeIdleDebugListener(mBridgeIdleDebugListener);
  }
  reactContext.initializeWithInstance(catalystInstance);
  catalystInstance.runJSBundle();
  
  return reactContext;
}

ReactBridge由CatalystInstance的Constructor创建。

代码语言:txt
AI代码解释
复制
/**
 *  CatalystInstanceImpl.java
 */
private CatalystInstanceImpl(
    final ReactQueueConfigurationSpec ReactQueueConfigurationSpec,
    final JavaScriptExecutor jsExecutor,
    final NativeModuleRegistry registry,
    final JavaScriptModulesConfig jsModulesConfig,
    final JSBundleLoader jsBundleLoader,
    NativeModuleCallExceptionHandler nativeModuleCallExceptionHandler) {
  mReactQueueConfiguration = ReactQueueConfigurationImpl.create(
      ReactQueueConfigurationSpec,
      new NativeExceptionHandler());
  mBridgeIdleListeners = new CopyOnWriteArrayList<>();
  mJavaRegistry = registry;
  mJSModuleRegistry = new JavaScriptModuleRegistry(CatalystInstanceImpl.this, jsModulesConfig);
  mJSBundleLoader = jsBundleLoader;
  mNativeModuleCallExceptionHandler = nativeModuleCallExceptionHandler;
  mTraceListener = new JSProfilerTraceListener();

  try {
    mBridge = mReactQueueConfiguration.getJSQueueThread().callOnQueue(
        new Callable<ReactBridge>() {
          @Override
          public ReactBridge call() throws Exception {
            Systrace.beginSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE, "initializeBridge");
            try {
              return initializeBridge(jsExecutor, jsModulesConfig);
            } finally {
              Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE);
            }
          }
        }).get();
  } catch (Exception t) {
    throw new RuntimeException("Failed to initialize bridge", t);
  }
}

ReactBridge将注册表信息存入与前端互通的全局变量 __fbBatchedBridgeConfig 中,使得Js层与Java层存在同样的模块注册表。

代码语言:txt
AI代码解释
复制
/**
 *  CatalystInstanceImpl.java
 */
private ReactBridge initializeBridge(
    JavaScriptExecutor jsExecutor,
    JavaScriptModulesConfig jsModulesConfig) {

  ReactBridge bridge = new ReactBridge(jsExecutor, new NativeModulesReactCallback(),
      mReactQueueConfiguration.getNativeModulesQueueThread());
  
  Systrace.beginSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE, "setBatchedBridgeConfig");
  bridge.setGlobalVariable(
      "__fbBatchedBridgeConfig",
      buildModulesConfigJSONProperty(mJavaRegistry, jsModulesConfig));
  bridge.setGlobalVariable(
      "__RCTProfileIsProfiling",
    
  return bridge;
}

调用catalystInstance.runJSBundle加载解析Jsbundle。假如在解析过程中出现Exception,统一交给NativeModuleCallExceptionHandler处理,建议开发者设置自己的NativeModuleCallExceptionHandler,可以归避部分Crash(SyntaxError: Unexpected token ‘<‘ 或 SyntaxError: Unexpected end of script)。

代码语言:txt
AI代码解释
复制
/**
 *  CatalystInstanceImpl.java
 */
public void runJSBundle() {
  try {
    mJSBundleHasLoaded = mReactQueueConfiguration.getJSQueueThread().callOnQueue(
        new Callable<Boolean>() {
          @Override
          public Boolean call() throws Exception {
            incrementPendingJSCalls();
            try {
              mJSBundleLoader.loadScript(mBridge);
              Systrace.registerListener(mTraceListener);
            } catch (JSExecutionException e) {
              mNativeModuleCallExceptionHandler.handleException(e);
            } finally {
              Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE);
            }
            return true;
          }
        }).get();
  } catch (Exception t) {
    throw new RuntimeException(t);
  }
}

在创建完React Context后会执行ReactContextInitAsyncTask的onPostExecute,从而调用setUpReactContext,会将ReactRootView做为Root View传递给UIManagerModule,此后Js通过UIManager创建的View都会add到该View上。

代码语言:txt
AI代码解释
复制
/**
 * ReactInstanceManagerImpl.java
 */
@Override
public void attachMeasuredRootView(ReactRootView rootView) {
  UiThreadUtil.assertOnUiThread();
  if(mIsNeedDetachView){
    Log.d(ReactConstants.QZONE_REACT_SRC_TAG,"attachMeasuredRootView do add");
    mAttachedRootViews.add(rootView);
    // If react context is being created in the background, JS application will be started
    // automatically when creation completes, as root view is part of the attached root view list.
    if (!mIsContextInitAsyncTaskRunning && mCurrentReactContext != null) {
      attachMeasuredRootViewToInstance(rootView, mCurrentReactContext.getCatalystInstance());
    }
  }else{
    Log.d(ReactConstants.QZONE_REACT_SRC_TAG,"attachMeasuredRootView do nothing");
  }

}

在绑定完RootView后,通过CatalystInstance获取AppRegistry这个JSModule后,进一步调用runApplication启动Js Application。

代码语言:txt
AI代码解释
复制
/**
 * ReactInstanceManagerImpl.java
 */
private void attachMeasuredRootViewToInstance(
    ReactRootView rootView,
    CatalystInstance catalystInstance) {

  rootView.removeAllViews();
  rootView.setId(View.NO_ID);

  UIManagerModule uiManagerModule = catalystInstance.getNativeModule(UIManagerModule.class);
  int rootTag = uiManagerModule.addMeasuredRootView(rootView);
  @Nullable Bundle launchOptions = rootView.getLaunchOptions();
  WritableMap initialProps = launchOptions != null
      ? Arguments.fromBundle(launchOptions)
      : Arguments.createMap();
  String jsAppModuleName = rootView.getJSModuleName();

  WritableNativeMap appParams = new WritableNativeMap();
  appParams.putDouble("rootTag", rootTag);
  appParams.putMap("initialProps", initialProps);
  catalystInstance.getJSModule(AppRegistry.class).runApplication(jsAppModuleName, appParams);
}

ReactNative中Java与Js通信不再赘述。至此,启动Js层AppRegistry的runApplication启动Js Application。

代码语言:txt
AI代码解释
复制
/**
* AppRegistry.js
*/
runApplication: function(appKey: string, appParameters: any): void {
  console.log(
    'Running application "' + appKey + '" with appParams: ' +
    JSON.stringify(appParameters) + '. ' +
    '__DEV__ === ' + String(__DEV__) +
    ', development-level warning are ' + (__DEV__ ? 'ON' : 'OFF') +
    ', performance optimizations are ' + (__DEV__ ? 'OFF' : 'ON')
  );
  invariant(
    runnables[appKey] && runnables[appKey].run,
    'Application ' + appKey + ' has not been registered. This ' +
    'is either due to a require() error during initialization ' +
    'or failure to call AppRegistry.registerComponent.'
  );
  runnables[appKey].run(appParameters);
},

相关推荐

React Native For Android 架构初探
ReactNative For Android 项目实战总结

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
React Native JSBundle拆包之原理篇
RN作为一款非常优秀的移动端跨平台开发框架,在近几年得到众多开发者的认可。纵观现在接入RN的大厂,如qq音乐、菜鸟、去哪儿,无疑不是将RN作为重点技术栈进行研发。
xiangzhihong
2022/11/30
3.3K0
深入源码探索 ReactNative 通信机制
本文从源码角度剖析 ReactNative 中 Java <> Js 的通信机制(基于最新的 ReactNative for Android Release 20)。 对于传统 Java<>Js 通信而言,Js 调用 Java 通不外乎 Jsbridge、onprompt、log 及 addjavascriptinterface 四种方式,在 Java 调用 Js 只有 loadurl 及高版本才支持的 evaluateJavaScript 两种。但在 ReactNative 中没有采用了传统 Java
腾讯Bugly
2018/03/23
1.3K0
深入源码探索 ReactNative 通信机制
⏱ React Native 启动速度优化——Native 篇(内含源码分析)
Web 开发有一个经典问题:「浏览器中从输入 URL 到页面渲染的这个过程中都发生了什么?」
卤代烃
2021/04/26
2K0
⏱ React Native 启动速度优化——Native 篇(内含源码分析)
React Native 启动速度优化 从Native方便着手
Web 开发有一个经典问题:「浏览器中从输入 URL 到页面渲染的这个过程中都发生了什么?」
conanma
2022/03/09
2.2K0
React Native运行原理解析
Facebook 于2015年9月15日推出react native for Android 版本, 加上2014年底已经开源的IOS版本,至此RN (react-native)真正成为跨平台的客户端框架。本篇主要是从分析代码入手,探讨一下RN在安卓平台上是如何构建一套JS的运行框架。 一、 整体架构 RN 这套框架让 JS开发者可以大部分使用JS代码就可以构建一个跨平台APP。 Facebook官方说法是learn once, run everywhere, 即在Android 、 IOS、 Browse
xiangzhihong
2018/02/05
6.3K0
React Native运行原理解析
从Android到React Native开发(二、通信与模块实现)
大家吼,(◐‿◑)作为失踪人口回归,这次第二期,就让我们来怼React Native的通信,快速实现单独的React Native模块到APP里,愉悦吧骚年。至于为什么要有这期?当然是为了愉悦的飙车啦ε-(´∀`; )。
GSYTech
2018/08/11
1.5K0
从Android到React Native开发(二、通信与模块实现)
React Native For Android 架构初探
本文介绍了React Native For Android的架构设计、启动流程、通信机制以及其与React Native的关系。作者还分享了如何通过React Native开发Android应用,以及Android应用如何调用React Native模块的示例。
QQ空间开发团队
2016/10/25
7.5K1
React Native For Android 架构初探
React Native调用原生UI组件
在React Native 中,其已经将几个常用的原生组件进行了封装,但是并不是所有系统的原始组件都被封装了,因此有时候我们不得不自己动手封装一下,从而能够使用那些React Native没有为我们封装的原生组件。为了方便讲解,我们选择第一个第三方库kenburnsview来讲解,kenburnsview是一个可以让图片在在页面移动或者放大缩小的库。 Android原生组件封装 1,继承SimpleViewManager,返回UI组件实例 首先,需要继承 SimpleViewManager 这个泛型类,
xiangzhihong
2018/02/06
1.6K0
React native和原生之间的通信
RN中文网关于原生模块(Android)的介绍可以看到,RN前端与原生模块之 间通信,主要有三种方法: 1)使用回调函数Callback,它提供了一个函数来把返回值传回给JavaScript。 2)使用Promise来实现。 3)原生模块向JavaScript发送事件。 关于使用回调,这是最简单的一种通信,这里可以看看官网的实现,今天要讲的是滴三种由原生模块向JavaScript发送事件。 (1)首先,你需要定义一个发送事件的方法。如下所示: /*原生模块可以在没有被调用的情况下往JavaScript发送事
xiangzhihong
2018/02/05
4.9K1
React native和原生之间的通信
ReactNative-Android插件
ReactNative-Android插件 一、编写插件 android项目包目录下创建ToastModule.java并继承ReactContextBaseJavaModule 实现构造函数接收NAContext 重写getName方法返回模块名称 重写getConstants方法导出js使用常量 定义模块功能方法并使用@ReactMethod注解当前方法 package com.awesomeproject; import android.widget.Toast;
前端小鑫同学
2022/12/24
3790
Android与RN层的交互
Android跳转到RN页面 由于主客是以插件化的方式集成功能插件的,所以在主客中Android跳转到RN页面需要plugin、module和component。plugin、module不过多解释,component对应的是具体的js页面,要成功启动此页面,需要在对应的RN二方库中注册此页面。例如:
xiangzhihong
2022/11/30
5920
ReactNative调用Android原生模块
有时候App需要访问平台API,但React Native可能还没有相应的模块包装;或者你需要复用一些Java代码,而不是用Javascript重新实现一遍;又或者你需要实现某些高性能的、多线程的代码,譬如图片处理、数据库、或者各种高级扩展等等。 我们把React Native设计为可以在其基础上编写真正的原生代码,并且可以访问平台所有的能力。要想实现访问Android原生API,总结一下,主要有以下几个步骤: 1. 创建一个原生模块 这个原生模块是一个继承ReactContextBaseJavaMod
xiangzhihong
2018/02/06
1.4K0
现有Android项目引入ReactNative--九步大法
为什么写这篇文章,因为很多时候我们是需要在原Android工程中添加ReactNative,而不是直接react-native init hello来创建工程,而且官网的说明不是很详细,不是完全针对安卓的,所以本文的必要性不言而喻。
先知先觉
2019/01/21
1.2K0
React Native与Android 原生通信
我们用React Native 做混合开发的时候免不了要原生和React Native 进行通信交互,这篇文章就是分享原生模块与JS传递数据的几种方式。
HelloJack
2018/08/28
2.6K0
详解React Native渲染原理
在《一篇文章详解React Native初始化和通信机制》中我们详细的介绍了React Native的初始化和通信机制。如果对通信机制不了的的读者可以先去阅读通信机制。
VV木公子
2020/04/14
11.1K0
详解React Native渲染原理
ReactJS到React-Native,架构原理概述
React是一个纯JS的UI库,只能干HTML/CSS/JS 提供的Web服务(新的H5 API不一定支持), React-Native厉害在于它能打通JS和Native Code, 让JS能够调用丰富的原生接口,充分发挥硬件的能力, 实现非常复杂的效果,同时能保证效率和跨平台性。
周陆军博客
2023/04/09
5.7K0
React Native在Android当中实践(四)——代码集成
首先在项目根目录中创建一个空的index.js文件。(注意在0.49版本之前是index.android.js文件) index.js是React Native应用在Android上的入口文件。而且它是不可或缺的!
Demo_Yang
2018/10/15
9920
React Native调用原生组件
在React Native开发过程中,有时候我们可能需要访问平台的API,但react Native还没有相应的实现,或者是React Native还不支持一些原生的属性,我们需要调用原生代码来实现,或者是我们需要复用一些原来的Java代码,这个时候我们就需要创建一个原生模块来自己实现对我们需要功能的封装。 相关文档可以参照官方的介绍。 #实例 下面我们就通过实现一个自定义模块,来熟悉编写原生模块需要用的一些知识。该模块主要实现调用一些Android原生的功能,比如弹Toast,启动Activity等。
xiangzhihong
2018/01/26
1.8K0
react-native 打开设置界面
iOS iOS打开设置还是比较简单的,使用Linking组件即可: Linking.openURL('app-settings:') .catch(err => console.log('error', err)) Android 1、在android/app/src/main/java/com/<projectname>/文件夹下创建opensettings文件夹 2、在这个文件夹下创建模块文件OpenSettingsModule.java(模块功能)和包文件OpenSettingsPackage.
mcq
2018/06/27
2K0
React Native使用原生组件
概述 有时候App需要访问平台API,但React Native可能还没有相应的模块包装;或者你需要复用一些Java代码,而不是用Javascript重新实现一遍;又或者你需要实现某些高性能的、多线程的代码,譬如图片处理、数据库、或者各种高级扩展等等。 我们知道React Native本身对这种偏业务和底层调用是不关心的,这时候我们就想到了原生组件,我们通过调用原生组件,然后经过特定的封装来达到效果。如我们在原生开发中常见的Toast为例: 原生模块封装 假设我们希望可以从Javascript发起一个T
xiangzhihong
2018/02/05
2.4K0
相关推荐
React Native JSBundle拆包之原理篇
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档