介绍

使用 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>

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

处理像素

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

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

虽然它并不完美，但从一个平台到另一个平台看起来大致相同。还有就是那张幕后，以确定你有什么计算height，width，borderWidth，等，看起来像在屏幕上。

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

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

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

环绕整个屏幕

现在，关于设置 a<View>以填充整个屏幕的一件事是，像 iPhone X 这样的手机的一部分屏幕被用户界面 (UI) 覆盖。通常，放置元素的屏幕部分将隐藏在屏幕的覆盖部分下方。

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

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

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

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

添加边距和填充

在网络上，您可以使用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。

添加阴影和边框

borderCSS 中的普通样式在 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 会简单地忽略它不支持的样式。它不会工作，但至少你不会收到任何错误。在大多数情况下，您会发现平台不支持的所有样式都是如此 – 它会被忽略。

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

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

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 } })
  }
})

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

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

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

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

此代码将为iOS 平台定义一个widthof ，为 Android 平台定义一个of 。100width75

结论

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

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

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

当然，您还可以使用像 <TouchableOpacity>和 之类的组件<View>，它们具有大部分可用的样式道具。或者，您也可以导入styled-components库并使用普通 CSS。