在 React Native 中設定按鈕元件的樣式

1. React Native 與 ReactJS 中的樣式按鈕
2. 如何在 React Native 中設定按鈕元件的樣式
3. 將樣式應用於 React Native Button 元件的間接方式
4. React Native 中的可自定義按鈕元件

React Native 允許 JavaScript 開發人員在不具備 Java 或 Swift 等本地語言知識的情況下編寫智慧手機應用程式。它使你可以根據需要自由自定義應用程式的 UI 介面。

本文旨在深入研究 React Native 中的 Button 元件。我們將嘗試展示它們如何工作以及如何自定義它們的外觀。

React Native 與 ReactJS 中的樣式按鈕

React Native 使用稍微不同的方法來渲染元件。螢幕上顯示的每個視覺元素都稱為一個檢視，它可以包含其他檢視。

通常，移動應用程式是用本地語言編寫的。為 Android 和 iOS 編寫應用程式有不同的語言。

作為小型企業或個人 Web 開發人員，你可能希望快速構建一個移動應用程式。儘管如此，聘請多名開發人員為這兩個平臺編寫應用程式可能並不實際。

React Native 解決了這個問題，並允許你直接用 JavaScript 編寫應用程式。

在幕後，這些 UI 元素最終將轉換為原生程式碼。由於這個因素，React Native 應用程式的使用者體驗與使用原生語言編寫的應用程式一樣好。

作為移動應用程式的基本構建塊的某些元件在 React Native 框架中很容易獲得。除了這些核心元件之外，你還可以使用更多元件，自己建立自定義原生元件或使用來自 [React Native 社群](https://React Native.directory/) 的原生元件。

你可能會使用 React Native 中的這些核心元件作為應用程式 UI 的構建塊。以下是這些核心元件的候選清單：<Text>、<View> <Image> 等。

本文將探討 <Button> 元件，它是 UI 的重要組成部分，也是使用者提供輸入的最簡單方法。

如何在 React Native 中設定按鈕元件的樣式

React Native 按鈕與你在 Web 上建立的自定義 Button 元件不同。它有不同的 API，而且樣式也不同。

它不接受你可能期望的 style props。另外，如果你想給按鈕設定文字，你必須使用與 ReactJS 不同的方法。

讓我們看看如何在 React Native 中設定按鈕文字。

<Button title="Some button text" />

除了 title 屬性外，<Button> 核心元件還接受 color 屬性。React Native 開發人員可以使用該屬性來更改按鈕的顏色。

讓我們看一個例子。

<Button title="Some button text" color="red" />

在這種情況下，按鈕將是紅色的。你還可以設定 disabled 屬性以使顏色變為灰色並限制其使用。

這些是你可以用來在 React Native 中設定 <Button> 元件樣式的唯一屬性。如你所見，自定義按鈕外觀的選項並不多。

將樣式應用於 React Native Button 元件的間接方式

React Native 中的 <Button> 元件不接受 style 屬性。但是，你可以通過將 <Button> 元件與確實接受樣式的 View 元件包裝在一起來新增更多樣式。

它使你可以自由地設定邊距、填充和其他樣式。讓我們看一個例子。

<View style={{marginTop: 50}}><Button title="Some button text" color="red" /></View>

在本例中，我們使用 <View> 元件作為按鈕的容器。在開發 Web 應用程式時，有時必須使用 <div> HTML 元素來包裹其他元素。

由於 <View> 元件確實接受 style 屬性，你可以將此屬性的值設定為樣式物件。style 屬性在 ReactJS 中的工作方式相同。

React Native 中的可自定義按鈕元件

<TouchableOpacity> 是另一個核心元件，用於響應使用者的操作，例如在螢幕上的點選。它的工作方式與按鈕非常相似，並接受 style 屬性，讓你可以更自由地設定它的樣式。

要了解有關此元件的更多資訊以及你可以使用它做什麼，請閱讀[官方 React Native 文件](https://React Native.dev/docs/touchableopacity)。