React Native

編年史

About Me

 

  • 傅耀德 (Dan、FuD、FuYaoDe)

    • 創科資訊全端工程師
    • 專注於 Node 生態體系
  • ​教學 / 經歷
    • 經營 React Natvie Taiwan 社群
    • 2017 第 8 屆iT 邦鐵人賽 佳作
    • GitHub 1600 Star React Native UI 元件 react-native-app-intro
    • 2017 HelloJS 講師 - React Native
    • 2016 Trunk Studio - 前端開發 React / Redux 起手式
    • 2016 HelloJS 講師 - React Native

為什麼想講這個主題?

 React Native Taiwan

第一次辦活動

 React Native

進步神速

0.34 ~ 0.50

剛使用 RN

完成史詩級專案!

簡單介紹一下

React Native 是什麼？

  • 2013 年夏天 Facebook 內部駭客松的 Project。
  • 2015 年 1 月 React.js Conf 發表， 2015 年 5 月正式發佈，當時只有 iOS 版本，2015 年 9 月 Android 才正式支援。
  • 現在已經能開發
    • iOS
    • Android
    • Apple TV
  • 用 JavaScript 撰寫真正的原生 App，不是所謂的 Mobile Web App、HTML5 App、 Hybrid App

特色

跨平台

寫一份程式碼
即可達成跨平台 App 開發建置與維護。
  • iOS
  • Android
  • Apple TV

高效能

效能與使用體驗接近原生開發

快速除錯

開發時可以快速的更新 UI

不用重新編譯

熟悉的開發方式

與 Web 前端相同的 REST API 存取後端資料服務。

只要上架一次

CodePush

免送審更新程式之機制

那有誰在用?

Trunk Studio

那 RN 這一年來

改了什麼?

提升效能

新增 FlatList

  • 高效能
  • 更簡單使用
<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
  dataSource: ds.cloneWithRows(['row 1', 'row 2']),
};

<ListView
  dataSource={this.state.dataSource}
  renderRow={(rowData) => <Text>{rowData}</Text>}
/>

ListView

FlatList

加快新手入門

CRNA

Create-React-Native-App

create-react-app

可以快速開始 React 專案

RN Playground

Expo

CRNA 

npm install -g create-react-native-app
create-react-native-app AwesomeProject
npm start

Amazon 也跟風

aws-mobile-react-native-starter

一些值得提的 Feature

 

  • react-native init XXX --template demo
  • 新增支援 Apple tv
  • display: none
  • TextInput 能讓鍵盤顯示 done 按鈕
  • 徹底移除了 MapView
  • 進入點合併一個 App.js
  • Develop Tool 能攔截 Http request
  • WebView 新增 injectJavaScript 方法
  • padding，margin，width，heigh 支持百分比
  • 超雷的把 PropTypes 獨立出來
  • 移除 React.createClass  替換成 createReactClass
  • 不再允许 multipart bundle
  • 一大堆的元件功能補齊
  • 一大堆的效能改進
  • 最狂的修正方法...更新文件，在文檔說明目前不支援...

 

Q&A

Made with Slides.com