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

相關資料

React Native FBBoard

By Tomas Lin

React Native FBBoard

親手做一個FBBoard

  • 2,349