在 React Native 中设置按钮组件的样式

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. React Native 与 ReactJS 中的样式按钮
  2. 如何在 React Native 中设置按钮组件的样式
  3. 将样式应用于 React Native Button 组件的间接方式
  4. React Native 中的可自定义按钮组件
在 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)。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相关文章 - React Native