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はなぜ動くのか

More Related Content

React Native Androidはなぜ動くのか