歡迎來到本系列文章的第三天！

希望你已經對我們的第一個專案－Todo List App 有所期待。今天我們要談論的主題是 React Native 元件和樣式設定。元件和樣式是我們建立 App 界面的基礎，瞭解這些，就相當於掌握了"魔法師的魔杖"，可以創建出各種各樣的界面。

榮恩，這玩意比魔杖還好用（x

那麼，讓我們開始吧！

React Native 元件

View

View 是 React Native 最基本的元件之一，你可以把它看作是 HTML 中的 <div> 元素。主要作用是作為其他元件的容器，用來設定布局和樣式。例如，我們會把一些 Text、Image 等元件放在一個 View 元件中，然後使用樣式來決定他們的位置和外觀。

Text

Text 元件用來顯示文字，把它當成 HTML 中的 <p> 就對了。一樣可以通過設定它的 style props 來改變文字的字體、大小、顏色等。

Image

Image 元件顧名思義就是用來顯示圖片，只要通過設定它的 source props 來指定要顯示的圖片，source 可以是一個本地的文件（需要使用require函數），也可以是來自網路 URL 的圖片。

上面的元件組合就像以下的範例：

import { Text, View, Image } from 'react-native';

export default function App() {
  return (
    <View>
      <Image source={require('./assets/icon.png')} />
      <Text>Hello World!</Text>
    </View>
  );
}

Button

在 React Native 中要使用按鈕來點擊的話，確實是有 Button 可以使用，但是 Button 沒有那麼實用，原因是你無法改變按鈕的背景顏色還有樣式，只能改變按鈕文字顏色，例如以下的例子：

import { Text, View, Image, Button } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>Hello World!</Text>
      <Button title="Click me" onPress={() => console.log('Button Clicked!')} color='#39f50f' />
    </View>
  );
}

TouchableOpacity

如果要使用按鈕的話，我建議使用 TouchableOpacity，在運用上的靈活度是非常高的。

import { Text, View, Image, TouchableOpacity } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>Hello World!</Text>
      <TouchableOpacity onPress={() => console.log('Button Clicked!')} style={{ backgroundColor: "#39f50f" }}>
        <Text style={{ color: '#fff' }}>Click me</Text>
      </TouchableOpacity>
    </View>
  );
}

以上這些元件只是 React Native 提供的眾多元件中的一部分，還有許多其他實用的元件，例如 ScrollView、Modal、TextInput 等，我們會在之後的文章中逐一介紹。

樣式設定

React Native 使用 JavaScript 物件來設定樣式，這和網頁中的 CSS 很相似，但也有一些差別。React Native 的樣式主要有兩種設定方式：行內樣式和樣式表。

行內樣式

行內樣式就是直接在元件的 style props 中寫樣式，例如：

<View style={{ backgroundColor: 'blue' }}>
  <Text style={{ color: 'white' }}>Hello, React Native!</Text>
</View>

樣式表

雖然行內樣式很方便，但當我們的樣式變得越來越複雜，或者我們需要重複使用一些樣式時，就需要用到樣式表了。React Native 提供了一個 StyleSheet API，讓我們可以把樣式抽取出來，寫在一個單獨的物件中，然後在需要的地方使用。例如：

import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue',
  },
  text: {
    color: 'white',
  },
});

以上就是今天我們要介紹的內容，希望你已經對 React Native 的元件和樣式有了一定的了解。在下一篇文章中，我們將進一步介紹 React Native 的布局方式，並開始實際的界面開發工作，敬請期待！