ReactNative for Android first look

ReactNative for Android first look

Transcript

1. Ԛ്
   ReactNative for Android vashzhong(ᇘӑ)
2. ૧ᄳലૼ • ߎી࿐߶React.js • React Nativeष൓ਔࢳી؟ࣲ
   • ࢃ֥҂ؓ౨਋ࢳ
3. ն۔ • React Native ൞೯ • React Native for Android ჰ৘ • ႋႨ
4. React Native
   ൞೯ ၂ส8FC߄
   ၍׮ႋႨषؿ۽ऎ ٚم
5. React Native
   ൞೯? (View) var AwesomeProject = React.createClass({ render: function() { return ( <View style={styles.container}> <Text style={styles.welcome}> {this.state.welcome_text} </Text> <Text style={styles.instructions}> Text Content </Text> <Text style={styles.instructions} onPress={this.handleClick.bind(this)}> Click Me </Text> </View> ); }, /* ... */ });
6. 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, }, });
7. React Native
   ൞೯ (logic) var AwesomeProject = React.createClass({ /* ... */ getInitialState: function() { return {welcome_text: "Welcome to React Native!"}; }, handleClick: function() { this.setState({welcome_text: 'Hello World'}) } });
8. React Native
   ൞೯ (app)
9. Ⴊಌׄ c 
   ൡކ8FCषؿ
   
   c 
   ၂สٚم
   ؟۱௜෻
   
   c 
   б)UNMٚσྟିݺ
   c 
   ׮෿หྟ
   
   c 
   GBDFCPPL႕ཙ৯ c 
   ҂Ӯඃ ቆࡱປӮ֮
   bug؟
   
   c 
   ྟି҂ۚ
   
   c 
   ௜෻࡙ಸ
10. React Native for Android ჰ৘
11. React Native for Android ჰ৘ ࣸ௞ልྍࣵ
    ࢖Ч <-> JNI C++ binding <-> Java
    
12. 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
13. 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ٚم
14. 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
15. React Native for Android ჰ৘ (c++) static void create(JNIEnv* env, jobject obj, jobject executor, jobject callback, jobject callbackQueueThread) { auto weakCallback = createNew<WeakReference>(callback); auto weakCallbackQueueThread = createNew<WeakReference>(callbackQueueThread); auto bridgeCallback = [weakCallback, weakCallbackQueueThread] (std::vector<MethodCall> calls, bool isEndOfBatch) { dispatchCallbacksToJava(weakCallback, weakCallbackQueueThread, std::move(calls), isEndOfBatch); }; auto nativeExecutorFactory = extractRefPtr<JSExecutorFactory>(env, executor); auto bridge = createNew<Bridge>(nativeExecutorFactory, bridgeCallback); setCountableForJava(env, obj, std::move(bridge)); } c ᇿၩᆃ৚֥bridgeCallback, c++11֥lambdaეم
16. React Native for Android ჰ৘ (c++) static void create(JNIEnv* env, jobject obj, jobject executor, jobject callback, jobject callbackQueueThread) { auto weakCallback = createNew<WeakReference>(callback); auto weakCallbackQueueThread = createNew<WeakReference>(callbackQueueThread); auto bridgeCallback = [weakCallback, weakCallbackQueueThread] (std::vector<MethodCall> calls, bool isEndOfBatch) { dispatchCallbacksToJava(weakCallback, weakCallbackQueueThread, std::move(calls), isEndOfBatch); }; auto nativeExecutorFactory = extractRefPtr<JSExecutorFactory>(env, executor); auto bridge = createNew<Bridge>(nativeExecutorFactory, bridgeCallback); setCountableForJava(env, obj, std::move(bridge)); } c ᇿၩᆃ৚֥bridgeCallback, c++11֥lambdaეم
17. React Native for Android ჰ৘ Native ——> Js
18. React Native for Android ჰ৘ Native ——> Js
19. React Native for Android ჰ৘ js —> native dispatchCallbacksToJava
20. React Native for Android ჰ৘ js —> native
21. 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(…) }
22. React Native for Android ჰ৘ bridgeФජԷࡹ CatalystInstance
23. 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;
24. 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;
25. React Native for Android ჰ৘ ቋᇔReactContext
26. React Native for Android ჰ৘ ൕၩ๭ https://speakerdeck.com/frantic/react-native-under-the-hood
27. React Native for Android ႋႨ
28. 我编不下去了...
29. DEMO
30. ሹࢲ • React Native还太新了, 业余可以玩玩, 多了解它的 理念, ⽤用在⽣生产环境还需时间. • React Native本质仍是提升开发效率, 节约开发时间 • 可以因为React Native的原因申请mac⼀一体机 :)