在 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)。