2017-04-12

ReactNative開發入門教學(1)-HelloWorld

學了React的基本架構後，我就要來學寫ReactNative啦！這才是我的主要目的。當然每次

學習第一個新語言就是要先來個HelloWorld了！這邊先假設我們都已經安裝好ReactNative

應有的環境下，我們創建一個testapp的方案吧！下達以下指令！

react-native init testapp

電腦就會幫我們把最基本需要的元件通通做好。這時候我們只要去編輯index.ios.js的檔案就可以

了！所以我們二話不說先打開裡面。看到裡面的內容是不是覺得有點不太一樣。沒關係，全部刪掉。

重新打造一個！先在ＪＳＸ的最上方寫上

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableHighlight,
    Image
  } from 'react-native';

把我們等一下要用的元件通通import進來。當然你不寫也沒關係，但是你每次要用的時候你就要在前面

加上React，這是一件很麻煩的事情吧！

接著我們知道React最少要有一個起始的元件！所以建立一個

export default class ShowView extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Hello World!</Text>
            </View>
        );
    }
}

是不是發現標籤有很大的不一樣？因為現在已經不是在寫網頁的，所以我們要換一下顯示的方式。其實

View標籤有點類似div，而Text標籤則是專門用來顯示文字的！有點類似span的感覺！

暫時先這樣想就覺得感覺簡單了起來！接著我們看到上面一樣用了style來表示樣式。

所以我們在下方又可以寫上樣式表。這邊我就用原本建立好的樣本直接使用！

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    }
});

寫習慣ＣＳＳ的人應該都很熟悉，有些東西可能不一樣，但大致上看標籤會能夠知道是什麼用途。

最後就是輸出的部分。因為寫ＡＰＰ不像在寫網頁可以把它輸出到某個

上，所以我們最要寫下

AppRegistry.registerComponent('testapp', () => ShowView);

感覺言下之意就是註冊一個Component到畫面上，而這個Component就是ShowView。但要特別注意的是

testapp的部分一定要跟你的專案名稱一樣喔！這樣就可以成功地顯示我們一個HelloWorld APP了！

ReactNative