Ԛ്
ReactNative for Android vashzhong(ᇘӑ) 

૧ᄳലૼ • ߎી࿐߶React.js • React Nativeष൓ਔࢳી؟ࣲ
• ࢃ֥҂ؓ౨਋ࢳ 

ն۔ • React Native ൞೯ • React Native for Android ჰ৘ • ႋႨ 

React Native
൞೯ ၂ส8FC߄
၍׮ႋႨषؿ۽ऎٚم 

React Native
൞೯? (View) var AwesomeProject = React.createClass({ render: function() { return ( {this.state.welcome_text} Text Content Click Me ); }, /* ... */ }); 

React Native
൞೯
(style) var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); 

React Native
൞೯ (logic) var AwesomeProject = React.createClass({ /* ... */ getInitialState: function() { return {welcome_text: "Welcome to React Native!"}; }, handleClick: function() { this.setState({welcome_text: 'Hello World'}) } }); 

React Native
൞೯ (app) 

Ⴊಌׄ c 
ൡކ8FCषؿ

c 
၂สٚم
؟۱௜෻

c 
б)UNMٚσྟିݺ
c 
׮෿หྟ

c 
GBDFCPPL႕ཙ৯ c 
҂Ӯඃ ቆࡱປӮ֮
bug؟

c 
ྟି҂ۚ

c 
௜෻࡙ಸ 

React Native for Android ჰ৘ 

React Native for Android ჰ৘ ࣸ௞ልྍࣵ
࢖Ч <-> JNI C++ binding <-> Java


React Native for Android ჰ৘ ReactBridge(java/jni) (1) package com.facebook.react.bridge; ... public class ReactBridge extends Countable { /* package */ static final String REACT_NATIVE_LIB = "reactnativejni"; static { SoLoader.loadLibrary(REACT_NATIVE_LIB); } private final ReactCallback mCallback; private final JavaScriptExecutor mJSExecutor; private final MessageQueueThread mNativeModulesQueueThread; c js๙ݖmCallbackᄝmNativeModulesQueueThreadטႨNative
c native๙ݖmJSExecutorטႨjs 

React Native for Android ჰ৘ ReactBridge(java/jni) (2) package com.facebook.react.bridge; ... public class ReactBridge extends Countable { ... public ReactBridge( JavaScriptExecutor jsExecutor, ReactCallback callback, MessageQueueThread nativeModulesQueueThread) { mJSExecutor = jsExecutor; mCallback = callback; mNativeModulesQueueThread = nativeModulesQueueThread; initialize(jsExecutor, callback, mNativeModulesQueueThread); } c initializeູnativeٚم
ؓႋC++֥bridge::createٚم 

React Native for Android ჰ৘ ReactBridge(java/jni) (3) c initializeູnativeٚم
ؓႋC++֥bridge::createٚم registerNatives("com/facebook/react/bridge/ReactBridge", { makeNativeMethod("initialize", "(Lcom/facebook/react/bridge/JavaScriptExecutor;Lcom/facebook/react/ bridge/ReactCallback;Lcom/facebook/react/bridge/queue/ MessageQueueThread;)V", bridge::create), makeNativeMethod( "loadScriptFromAssets", "(Landroid/content/res/ AssetManager;Ljava/lang/String;)V", bridge::loadScriptFromAssets), ... }); src/main/jni/react/jni/OnLoad.cpp 

React Native for Android ჰ৘ (c++) static void create(JNIEnv* env, jobject obj, jobject executor, jobject callback, jobject callbackQueueThread) { auto weakCallback = createNew(callback); auto weakCallbackQueueThread = createNew(callbackQueueThread); auto bridgeCallback = [weakCallback, weakCallbackQueueThread] (std::vector calls, bool isEndOfBatch) { dispatchCallbacksToJava(weakCallback, weakCallbackQueueThread, std::move(calls), isEndOfBatch); }; auto nativeExecutorFactory = extractRefPtr(env, executor); auto bridge = createNew(nativeExecutorFactory, bridgeCallback); setCountableForJava(env, obj, std::move(bridge)); } c ᇿၩᆃ৚֥bridgeCallback, c++11֥lambdaეم 

React Native for Android ჰ৘ (c++) static void create(JNIEnv* env, jobject obj, jobject executor, jobject callback, jobject callbackQueueThread) { auto weakCallback = createNew(callback); auto weakCallbackQueueThread = createNew(callbackQueueThread); auto bridgeCallback = [weakCallback, weakCallbackQueueThread] (std::vector calls, bool isEndOfBatch) { dispatchCallbacksToJava(weakCallback, weakCallbackQueueThread, std::move(calls), isEndOfBatch); }; auto nativeExecutorFactory = extractRefPtr(env, executor); auto bridge = createNew(nativeExecutorFactory, bridgeCallback); setCountableForJava(env, obj, std::move(bridge)); } c ᇿၩᆃ৚֥bridgeCallback, c++11֥lambdaეم 

React Native for Android ჰ৘ Native ——> Js 

React Native for Android ჰ৘ Native ——> Js 

React Native for Android ჰ৘ js —> native dispatchCallbacksToJava 

React Native for Android ჰ৘ js —> native 

React Native for Android ჰ৘ bridgeФජԷࡹ CatalystInstance package com.facebook.react.bridge; ... public class CatalystInstanceImpl implements CatalystInstance { ... // Access from any thread private final CatalystQueueConfigurationImpl mCatalystQueueConfiguration; private final JavaScriptModuleRegistry mJSModuleRegistry; private final NativeModuleRegistry mJavaRegistry; ... // Access from JS thread private @Nullable ReactBridge mBridge; private CatalystInstanceImpl(...) { ... mCatalystQueueConfiguration.getJSQueueThread().runOnQueue(()->{ initializeBridge(jsExecutor, jsModulesConfig);} } private void initializeBridge() { mBridge = new ReactBridge(…) } 

React Native for Android ჰ৘ bridgeФජԷࡹ CatalystInstance 

React Native for Android ჰ৘ ቋᇔReactContext package com.facebook.react.bridge; ... public class ReactContext extends ContextWrapper { ... private @Nullable CatalystInstance mCatalystInstance; private @Nullable LayoutInflater mInflater; private @Nullable MessageQueueThread mUiMessageQueueThread; private @Nullable MessageQueueThread mNativeModulesMessageQueueThread; private @Nullable MessageQueueThread mJSMessageQueueThread; private @Nullable NativeModuleCallExceptionHandler mNativeModuleCallExceptionHandler; private @Nullable Activity mCurrentActivity; 

React Native for Android ჰ৘ ቋᇔReactContext package com.facebook.react.bridge; ... public class ReactContext extends ContextWrapper { ... private @Nullable CatalystInstance mCatalystInstance; private @Nullable LayoutInflater mInflater; private @Nullable MessageQueueThread mUiMessageQueueThread; private @Nullable MessageQueueThread mNativeModulesMessageQueueThread; private @Nullable MessageQueueThread mJSMessageQueueThread; private @Nullable NativeModuleCallExceptionHandler mNativeModuleCallExceptionHandler; private @Nullable Activity mCurrentActivity; 

React Native for Android ჰ৘ ቋᇔReactContext 

React Native for Android ჰ৘ ൕၩ๭ https://speakerdeck.com/frantic/react-native-under-the-hood 

React Native for Android ႋႨ 

我编不下去了... 

DEMO 

ሹࢲ • React Native还太新了, 业余可以玩玩, 多了解它的 理念, ⽤用在⽣生产环境还需时间. • React Native本质仍是提升开发效率, 节约开发时间 • 可以因为React Native的原因申请mac⼀一体机 :)