如何在ReactNative应用程序中使用样式

介绍

使用 React Native 时，默认情况下它不使用 HTML 和 CSS 作为 Web 应用程序。

事实上，开箱即用，一切都是基于 Flexbox 自动设置样式的。

在本文中，您将了解如何将样式应用于 React Native 应用程序。

先决条件

如果您想继续阅读本文，您将需要：

熟悉使用 CSS 属性和值。
熟悉在 React Native 中使用 JSX 语法。

使用 `StyleSheet`

首先要了解 React Native 样式是使用 StyleSheet 组件。

首先，像这样导入它：

import { StyleSheet } from 'react-native';

之后，您可以像这样使用它：

const styles = StyleSheet.create({
  container: {
    height: 100
  }
})

然后，将其添加到适当的组件样式中，如下所示：

<View style={styles.container}></View>

你也可以走内联路线，如下所示：

<View style={{height: 100}}></View>

此代码将产生相同的结果。

处理像素

您可能已经注意到我们没有在 height: 100 中为 100 指明任何单位。你可能习惯写px、vm等。问题是，React Native 中默认使用哪些单位？

这是一个相当复杂的问题，需要多篇文章来回答。对于 iOS，它们是“逻辑点”，Android 使用 DIP。这背后有很多推理，以及为什么选择它的逻辑。同一个屏幕尺寸有很多不同的屏幕尺寸和不同的分辨率。因此，如果我们使用普通像素，它在某些手机上会显得像素化；但是“点”背后的想法是让事物在像素密集的高分辨率屏幕上看起来与在低分辨率屏幕上看起来相对相同。

虽然它并不完美，但从一个平台到另一个平台看起来大致相同。在幕后进行计算以确定您的 height、width、borderWidth 等在屏幕上的外观。

您也可以使用 'auto' 或百分比，但将其括在引号中，如下所示：

<View style={{ height: '100%' }}></View>

此代码将产生一个完整的高度 View。

包裹整个屏幕

现在，关于将 <View> 设置为填满整个屏幕需要了解的一点是，像 iPhone X 这样的手机有一部分屏幕被用户界面 (UI) 覆盖。通常，您放置元素的屏幕部分将隐藏在屏幕的覆盖部分之下。

为此，请使用 React Native 组件 <SafeAreaView> 来包装其余组件，您可以确定您将看到所有屏幕。

或者，您可以使用 flex: 1。

React Native 默认使用 Flexbox，所以你不用担心应用 display: flex。与默认将 flexDirection 设置为 row 的 web 版本不同，React Native 使用 flexDirection 设置为 column。将样式设置为 flex: 1 会将 flex-grow 应用到组件以占据 Flexbox 容器的整个主轴。

这两种方法都将确保内容保持可见。

添加边距和填充

在 Web 上，您可以使用 margin 和 padding 简写。

然而，React Native 有额外的样式助手来应用边距和内边距。

例如，要为元素提供 20 的顶部和底部边距，您可以像这样设置：

<View style={{marginVertical: 20}}></View>

你也可以给它顶部和底部的填充：

<View style={{paddingVertical: 20}}></View>

除了“垂直”的助手外，还有“水平”的助手：paddingHorizontal 和 marginHorizontal。

还有“开始”和“结束”，您可以在边距和填充的末尾添加标签。每当你在样式中看到“开始”和“结束”，就可以知道它们依赖于容器的 flexDirection

如果 flexDirection 是 row，则 marginStart 的行为类似于 marginLeft。

如果 flexDirection 是 row-reverse，则 marginStart 的行为类似于 marginRight。

另外，请记住，“开始”和“结束”会覆盖 marginLeft 和 marginRight、paddingLeft 和 paddingRight。

添加阴影和边框

CSS 中正常的 border 样式在 React Native 样式中不可用。您必须将其分解为 borderColor 和 borderWidth。有了这两个，你就有足够的边界了。此外，您可以选择哪一侧接收哪种颜色和宽度。

还有 borderRadius，你可能已经习惯了，它给每个角一个半径。您可以使用 top-start、top-end、bottom-start 或 bottom-end 选择每个单独的半径，如下所示：borderTopStartRadius: 20，或者您可以使用top-left、top-right 等越简单。

最后，您可以使用 borderStyle 从虚线、点线或实线边框中进行选择。

至于 React Native 中的阴影，您不会使用您可能熟悉的 box-shadow。

相反，React Native 的样式只适用于 iOS：

shadowOffset: { height: 3, width: 3 }, 
shadowColor: '#000000',
shadowOpacity: 0.5,
shadowRadius: 5

在旧版本的 Android 中，React Native 没有一个很好的内置解决方案。您可以设置 elevation 属性，但这不可自定义，并且不适用于其他样式 - 例如 border 和 background-color。

处理平台之间的差异

在上一节中，我们看到了平台之间的第一个主要区别：一个有阴影样式，而另一个没有。现在好消息是，在上面的示例中，Android 将简单地忽略它不支持的样式。它不起作用，但至少你不会收到任何错误。在大多数情况下，您会发现平台不支持的所有样式都是如此——它将被忽略。

但是，您会发现从一个平台到另一个平台的外观有很大差异，即使是完美、干净的样式。

为了保持跨平台的样式相似，让我们从 React Native 导入 Platform 组件。

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

{/* ... */}
<View style={styles.container}></View>
{/* ... */}

const styles = StyleSheet.create({
  container: {
    height: Platform.OS === 'android' ? 100 : 20,
    backgroundColor: Platform.OS === 'ios' ? 'yellow' : 'blue',
    ...Platform.select({ ios: { width: 100 } })
  }
})

请注意此处设置特定于平台的样式的两种不同方法。一种方法是在 style 属性之后，使用三元运算符：

height: Platform.OS === 'ios' ? 100, 20

这在大多数情况下都很有效，但是如果您甚至不想在一个平台上设置样式怎么办？这就是 ...Platform.select() 的用武之地。这允许您仅在一个平台上指定样式，或同时在两个平台上指定样式：

...Platform.select({ ios { width: 100 }, android: { width: 75 } })

此代码将为 iOS 平台定义 100 的 width 和 Android 平台的 75 的 width。

结论

在本文中，您了解了如何将样式应用于 React Native 应用程序。

您会注意到在 React Native 中，样式因组件而异，这与 Web 不同，基本上每个元素都可以使用每种样式。

在官方 React Native 文档中用于 Text 组件的样式属性。它不具备网络上可用的全部属性。有些组件，比如 Button，甚至没有 style 属性。

你也可以使用 <TouchableOpacity> 之类的组件，当然还有 <View>，它们具有大多数可用的样式属性。或者，您也可以导入 styled-components 库并使用普通 CSS。