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

相關資料

• FBBoard
• messagecomponent
• messagecomponent npm
• npm publish