從 Android Developer 角度探索

React Native

許小美 Neo

Outline

• React.js
• ReactNative
• LiveDemo
• Q & A

What is ReactJS ?

a javascript library for building user interfaces

特色

• Component

• VDOM

• JSX

• Flux

React JSX

// Reac JSX
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

What is Flux ?

application architecture for building user interfaces

MVC 架構

Flux 架構

What is React Native ?

a framework for building native apps using react

What's different ?

• Flash
• PhoneGap
• Cordova
• Titanium 

原生開發者鄙視鏈

Android > Flash = PhoneGap = Cordova = Titanium

React / React Native

React Native 架構

圖片來源 http://goo.gl/tyAeSZ

React Android Dependencies

• appcompat-v7-23.0.0

• bolts-android-1.1.4

• imagepipeline-0.6.1

• fresco

• jackson-core-2.2.3

• okhttp-2.4.0

• okhttp-ws-2.4.0

• okio-1.5.0

• react-native-0.11.0

• support-annotations-23.0.0

• support-v4-23.0.0

• ...

Java call JavaScript

圖片來源 http://goo.gl/tyAeSZ

JavaScript call Java

圖片來源 http://goo.gl/tyAeSZ

React Native 特色

• 不使用 WebView 運作
• 透過 React Native 直接操作 Native UI
• 也提供開發者客製化 Native UI 和 Native Model
• 提供良好的用戶體驗
• 可跨 iOS / Android
• Learn once write anywhere

Live Demo

從 Android 角度看

• 專注在 View Component 的開發
  (效果/效能/多裝置配適的調校)
• 統一 input/output 方式
• Flux 的單一資料流架構
• Flux 負責所有邏輯與資料管理
• 可上架後遠端修正的優勢

Q & A