React Native Androidはなぜ動くのか

React Native Android
2018.2.9 DroidKaigi 2018
Yukiya Nakagawa / @Nkzn
Room2 12:50-13:40
#droidkaigi_room2

Who are you?
• Yukiya Nakagawa / @Nkzn
• @
•
• Android 2009
• React Native v0.17

•
• Hello World
• Production

Target
• React Native  
Android
• Android React Native

Best Match
•
• JavaScript
• React Native

React Native Androidはなぜ動くのか

React
https://facebook.github.io/react/

import React from 'react';
import ReactDOM from 'react-dom';
const styles = {
container: {display: 'flex', flexDirection: ‘row', …}
};
class App extends React.Component {
render() {
const myName = /* props or state */;
return (
<div style={styles.container}>
<Header />
<LeftPane />
<RightPane
name={myName} />
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);

https://tylermcginnis.com/an-introduction-to-life-cycle-events-in-react-js/

https://developer.android.com/reference/android/app/Activity.html

React is
• Facebook JS
• https://facebook.github.io/react/
•
•
• View
View View

import React from 'react';
const styles = {
};
render() {
return (
<div style={styles.container}>
<Header />
<LeftPane />
<RightPane
name={myName} />
</div>
);
}
}
ReactDOM.render(
<App />,
);
div
div
ReactDOM.render(
<App />,
);

import React from "react";
import { View, AppRegistry } from "react-native";
const styles = {
};
render() {
return (
<View style={styles.container}>
<Header />
<LeftPane />
<RightPane
name={myName} />
</View>
);
}
}
AppRegistry.registerComponent(
"MyReactNativeApp",
() => App
);

React
• React DOM
• React View Web
• React Native
• React View UI

React
• View props
•
•
• DOM
• UI
•
• View
• UI
GUI
Virtual DOM

React is not
• React
• React View
• React View

React Native
• JavaScript
• JS Java
• React Android View
•

Activity
ReactRootView
(FrameLayout) JS

JS
• JavaScriptCore
• WebKit(Safari) JS
• Facebook Android NDK
 
https://github.com/facebook/android-jsc

• ReactRootView God FrameLayout
• ReactInstanceManager JS
• CatalystInstance JNI

• ReactInstanceManager
• JSC
• JS
• CatalystInstance
• JNI Java
• Java JSC IF
startReactApplication()
JS

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModulePath("index")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(
mReactInstanceManager,
"MyReactNativeApp",
null);
setContentView(mReactRootView);
}
Java
Activity RN

@Override
.build();
"MyReactNativeApp",
null);
}
Java
ReactRootView FrameLayout

@Override
.build();
"MyReactNativeApp",
null);
}
Java
ReactInstanceManager

@Override
.build();
"MyReactNativeApp",
null);
}
Java
RootView InstanceManager

@Override
.build();
"MyReactNativeApp",
null);
}
Java
setContentView

import React from "react";
import { View, AppRegistry } from "react-native";
const styles = {
};
render() {
return (
<View style={styles.container}>
<Header />
<LeftPane />
<RightPane
name={myName} />
</View>
);
}
}
AppRegistry.registerComponent(
"MyReactNativeApp",
() => App
);
MyReactNativeApp

ReactInstance
• React JS Java
• React
React

JSC JS
↑
View
ReactRootView
ReactRootView#startReactApplication()
Java
JavaScript

Native Modules
• Java Swift
JS
• RN Android Java JS
•

const ToastAndroid = require('ToastAndroid');
ToastAndroid.show(" ",
ToastAndroid.SHORT);
JS Toast
JS

@ReactModule(name = "ToastAndroid")
public class ToastModule
extends ReactContextBaseJavaModule {
@ReactMethod
public void show(final String message,
final int duration) {
UiThreadUtil.runOnUiThread(() -> {
Toast.makeText(
getReactApplicationContext(),
message,
duration).show();
});
}
}
Toast
Java

@ReactMethod
Toast.makeText(
message,
duration).show();
});
}
}
ReactContextBaseJavaModule
Java

@ReactMethod
Toast.makeText(
message,
duration).show();
});
}
}
Native Module
Java
※name

@ReactMethod
Toast.makeText(
message,
duration).show();
});
}
}
JS @ReactMethod
Java

@ReactMethod
Toast.makeText(
message,
duration).show();
});
}
}
Android not UI Thread
Java

public class ToastPackage implements ReactPackage {
@Override
public List<ViewManager> createViewManagers(
ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@Override
public List<NativeModule> createNativeModules(
return Arrays.<NativeModule>asList(
new ToastModule(reactContext));
}
}
ReactPackage
Java

public class ToastPackage implements ReactPackage {
@Override
}
@Override
return Arrays.<NativeModule>asList(
new ToastModule(reactContext));
}
}
createNativeModules
Java

ReactInstanceManager.builder()
.addPackage(new ToastPackage())
.build();
Java

const ToastAndroid = require('ToastAndroid');
ToastAndroid.show(" ",
ToastAndroid.SHORT);
JavaScript
JS

Readable/Writable Map/Array
• JS
Java/C++

+ hasKey(name: String): boolean
+ isNull(name: String): boolean
+ getBoolean(name: String): boolean
+ getDouble(name: String): double
+ getInt(name: String): int
+ getString(name: String): String
+ getArray(name: String): ReadableArray
+ getMap(name: String): ReadableMap
+ getDynamic(name: String): Dynamic
+ getType(name: String): ReadableType
+ keySetIterator(): ReadableMapKeySetIterator
+ toHashMap(): HashMap<String, Object>
+ putNull(key: String)
+ putBoolean(key: String, value: boolean)
+ putDouble(key: String, value: double)
+ putInt(key: String, value: int)
+ putString(key: String, value: String)
+ putArray(key: String, value: WritableArray)
+ putMap(key: String, value: WritableMap)
+ merge(source: ReadableMap);

+ size(index: int): int
+ isNull(index: int): boolean
+ getBoolean(index: int): boolean
+ getDouble(index: int): double
+ getInt(index: int): int
+ getString(index: int): String
+ getArray(index: int): ReadableArray
+ getMap(index: int): ReadableMap
+ getDynamic(index: int): Dynamic
+ getType(index: int): ReadableType
+ toArrayList(index: int): ArrayList<Object>
+ pushNull()
+ pushBoolean(value: boolean)
+ pushDouble(value: double)
+ pushInt(value: int)
+ pushString(value: String)
+ pushArray(array: WritableArray)
+ pushMap(map: WritableMap)

JSC++Java
{
name: "nkzn",
age: 30
}
[
"cupcake",
"donut",
"eclair"
]

Promise
• ReactMethod Promise
JS Promise
•
promise.resolve() promise.reject()
JS

@ReactMethod
public void getString(Promise promise) {
try {
ClipboardManager clipboard = getClipboardService();
ClipData clipData = clipboard.getPrimaryClip();
if (clipData == null) {
promise.resolve("");
} else if (clipData.getItemCount() >= 1) {
ClipData.Item firstItem = clipboard
.getPrimaryClip()
.getItemAt(0);
promise.resolve("" + firstItem.getText());
} else {
}
} catch (Exception e) {
promise.reject(e);
}
}
Clipboard#getString
Java

@ReactMethod
public void getString(Promise promise) {
try {
ClipboardManager clipboard = getClipboardService();
ClipData clipData = clipboard.getPrimaryClip();
if (clipData == null) {
} else if (clipData.getItemCount() >= 1) {
ClipData.Item firstItem = clipboard
.getPrimaryClip()
.getItemAt(0);
promise.resolve("" + firstItem.getText());
} else {
}
} catch (Exception e) {
promise.reject(e);
}
}
JS
RxJava
onNext, onError
※ Clipboard
Java

// Promise Style
Clipboard.getString()
.then(str => {
// use string
});
// async/await Style
async function getClip() {
const str = await Clipboard.getString();
return str;
}
JS
JS

EventEmitter
Android Broadcast

// JS
class RCTDeviceEventEmitter extends EventEmitter {
emit(eventType) {...}
addListener(eventType, listener, context) {...}
removeAllListeners(eventType) {...}
removeSubscription(subscription) {...}
}
JS
RCTDeviceEventEmitter.js
※ emit EventEmitter

// interface
// ReactInstanceModule
public interface RCTDeviceEventEmitter
extends JavaScriptModule {
void emit(String eventName,
@Nullable Object data);
}
Java
DeviceEventManagerModule.java

// JS
public void emitHardwareBackPressed() {
getReactApplicationContext()
.getJSModule(RCTDeviceEventEmitter.class)
.emit("hardwareBackPress", null);
}
JS emit
Java
DeviceEventManagerModule.java

JS→Java ReactModule
Java→JS JavaScriptModule

public class PhotoView extends ImageView {
public PhotoView(Context context) { ... }
// Android
}
Java

public class PhotoViewManager
extends SimpleViewManager<PhotoView> {
@Override
public String getName() {
return "PhotoView";
}
@Override
protected PhotoView createViewInstance(
ThemedReactContext reactContext) {
return new PhotoView(reactContext);
}
@ReactProp(name = "uri")
public void setUri(PhotoView view,
@Nullable String uri) {
view.setUri(uri);
}
}
React
Java

@Override
return "PhotoView";
}
@Override
}
view.setUri(uri);
}
}
SimpleViewManager
Java

@Override
return "PhotoView";
}
@Override
}
view.setUri(uri);
}
}
Android View
Java

@Override
return "PhotoView";
}
@Override
}
view.setUri(uri);
}
}
props
Java

//
view.setUri(uri);
}
//
<PhotoView
uri="http://example.com/hoge.png" />
Java
JS

public class MyLibraryPackage implements ReactPackage {
@Override
return Arrays.<ViewManager>asList(
new PhotoViewManager()
);
}
@Override
}
}
ReactPackage
Java

public class MyLibraryPackage implements ReactPackage {
@Override
return Arrays.<ViewManager>asList(
new PhotoViewManager()
);
}
@Override
}
}
createViewManagers
Java

Native Modules

import PropTypes from “prop-types”;
import {
requireNativeComponent,
View
} from "react-native";
const name = "PhotoView";
const photoViewInterface = {
name: name,
displayName: name,
propTypes: {
...View.propTypes,
uri: PropTypes.string.isRequired
}
};
export default
requireNativeComponent(name, photoViewInterface);
JS PhotoView.js
JS
Java
Java

import PhotoView from "./PhotoView";
//
<PhotoView
uri="http://example.com/hoge.png" />
JS

• JS UI
props interface
•
ViewManager

UIManagerModule
• React
React Native React DOM
Java
• createView updateView
ReactMethod

@ReactMethod
public void createView(
int tag,
String className,
int rootViewTag,
ReadableMap props) {
mUIImplementation.createView(
tag, className, rootViewTag, props);
}
@ReactMethod
public void updateView(
int tag,
String className,
ReadableMap props) {
mUIImplementation.updateView(
tag, className, props);
}
UIManagerModule.java

View
• React View Java
ReactShadowNode Java View
Yoga
• UIManagerModule React Java
View
• View View

Yoga
https://facebook.github.io/yoga/

• Flexbox
Yoga Android
• borderColor
ViewManager Android
setBorderColor

• Java C++ JS
• ReactInstanceManager
• ReactInstanceManager Native
Module JavaScript Module
• UI Native Module

Application Sources
import
$buildDir/intermediates
/assets/release /res/merged/release

iOS
require("path/to/awesome.png")

React Native Android
• API View Android
•
• JS JS

• Android SDK iOS SDK
• Web
• JS

• React Native
 
http://tomoima525.hatenablog.com/entry/2017/12/19/180523
• Android  
7  
https://peaks.cc/Nkzn/architecture_patterns
@tomoaki_imai

React Native Androidはなぜ動くのか

React Native Androidはなぜ動くのか

Recommended

More Related Content

What's hot

What's hot(20)

Similar to React Native Androidはなぜ動くのか

Similar to React Native Androidはなぜ動くのか(20)

More from Yukiya Nakagawa

More from Yukiya Nakagawa(20)

Recently uploaded

Recently uploaded(20)

React Native Androidはなぜ動くのか