RN FBBoard
第一個React Native APP
主講: Tomas
關於我
- 目前使用 React Native 開發產品
- 以前使用Nodejs 開發後端API
- 喜歡潮潮的東西
我們今天只談Component
Component
Component
Component
什麼是Component
- 每個Component都是一個物件
- 物件都可以有自己的特性(state)跟行為(method)
最基本的Component
- View
- Text
- Image
- Navigator
- ScrollView
- MapView
寫完的RN會長這樣
但是他並不是物件
WTF
Class (類別)
Object(物件)
我們刻的是模板而不是麵包
Component 的State
儲存 Data 或是狀態
ES6
Component的行為(method)
- render
- constructor
- componentDidMount
- componentWillMount
- componentWillUnmount
render(渲染)
回傳一個 JSX 物件
什麼都可以沒有，就是它不能沒有
這是不對的
這樣才是對的
constructor
使用ES6才會用到的建構子
componentDidMount
元件顯示在頁面上之後執行
componentWillMount
元件將要顯示的時候執行
ComponentWillUnmount
元件將要被移除的時候執行
就像商品上架流程
constructor
WillUnmount
DidMount
WillMount
實際開始來做一個App
後端回傳過來的資料會長這樣
npm install messagecomponent --save
<ScrollView style={[styles.content, { padding : 10}]}>
{this.state.messages.map((message, index) => {
return(
<Message
message={message}
key={`message${index}`}/>
);
})}
</ScrollView>
import Message from 'messagecomponent';
來看Code吧
React 因為NPM而更美妙
Custom View Publish
你不再是一個人寫CODE
Share Your React Native
Component
Have Fun!
Q and A
相關資料
RN FBBoard 第一個React Native APP 主講: Tomas