Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ReactNative for Android first look

cppgohan
November 27, 2015

ReactNative for Android first look

ReactNative for Android first look

cppgohan

November 27, 2015
Tweet

More Decks by cppgohan

Other Decks in Programming

Transcript

  1. 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> ); }, /* ... */ });
  2. 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, }, });
  3. React Native൞೯ (logic) var AwesomeProject = React.createClass({ /* ... */

    getInitialState: function() { return {welcome_text: "Welcome to React Native!"}; }, handleClick: function() { this.setState({welcome_text: 'Hello World'}) } });
  4. Ⴊಌׄ c  ൡކ8FCषؿ c  ၂สٚم؟۱௜෻ c  б)UNMٚσྟିݺ

    c  ׮෿หྟ c  GBDFCPPL႕ཙ৯ c  ҂Ӯඃ ቆࡱປӮ֮ bug؟  c  ྟି҂ۚ c  ௜෻࡙ಸ
  5. 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
  6. 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ٚم
  7. 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
  8. 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ეم
  9. 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ეم
  10. 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(…) }
  11. 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;
  12. 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;
  13. ሹࢲ • React Native还太新了, 业余可以玩玩, 多了解它的 理念, ⽤用在⽣生产环境还需时间. • React

    Native本质仍是提升开发效率, 节约开发时间 • 可以因为React Native的原因申请mac⼀一体机 :)