设置React Native应用程式样式

If you ever used React Native, you probably realized it doesn’t use normal HTML & CSS like a web application. In this guide, we will discuss the differences. And one of the main differences you will see is everything is automatically styled based on Flexbox.

如果您曾经使用过React Native，您可能会意识到它不像Web应用程序那样使用普通HTML和CSS。 在本指南中，我们将讨论差异。 您将看到的主要区别之一是，所有内容都是根据Flexbox自动设置样式的。

Now if you wanted, you could simply import the styled-components library and use normal CSS like that. That is a great library and I would recommend it. But, if you want to get used to styling in a Native app, let’s see how to do that.

现在，如果需要，您可以简单地导入styled-components库并使用普通CSS。 那是一个很棒的图书馆，我会推荐它。 但是，如果您希望习惯于在本机应用程序中进行样式设置，请让我们看看如何做到这一点。

样式表 (StyleSheet)

The first thing to know about React Native styling, is to use the StyleSheet component. Import it like this:

关于React Native样式的第一件事是使用StyleSheet组件。 像这样导入它：

import { StyleSheet } from 'react-native';

After that, you can use it like this:

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

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

Then, add it to style your component appropriately, like this:

然后，添加它以适当地设置组件样式，如下所示：

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

You could go the inline road, like the following and you would end up with the same thing:

您可以像下面那样走内联路线，最终会遇到同样的事情：

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

像素？ (Pixels?)

Looks pretty similar to CSS, right? It is, in general, named the same, to reflect CSS, but you may notice we did not indicate any unit to the “100” in height: 100. You may be used to writing “px”, “vm”, etc. And the question is, what units are used by default in React Native?

看起来很像CSS，对吧？ 通常，它用相同的名称来反映CSS，但是您可能会注意到我们没有将任何单位表示为height: 100 “ 100” height: 100 。 您可能习惯于编写“ px”，“ vm”等。问题是，React Native默认使用哪些单位？

That is a pretty complex question, which has taken more than one article to answer. For iOS, they are “logical points”, and Android uses DIP. There is a lot of reasoning behind this, as well as the logic as to why this was chosen. The short of it is, there are many different screen sizes and different resolutions on the same screen size. So, if we used normal pixels, it would look pixelated on some phones; but the idea behind “points” is to make things look relatively the same on a pixel-dense, high-resolution screen, as it does on an low-resolution screen.

这是一个非常复杂的问题，已经花费了不止一篇文章来回答。 对于iOS，它们是“逻辑要点”，而Android使用DIP。 这背后有很多原因，还有为什么选择它的逻辑。 简而言之，同一屏幕尺寸上有许多不同的屏幕尺寸和不同的分辨率。 因此，如果我们使用普通像素，则在某些手机上会显得像素化。 但是“要点”背后的想法是使像素密集的高分辨率屏幕上的内容看起来与低分辨率屏幕上的内容相对相同。

The good thing is, this will handle most of the styling for you, from iOS to Android. Though it isn’t perfect, it will look roughly the same from one platform to the other. There is a calculation that goes on behind the scenes to determine what your height, width, borderWidth, etc, would look like on the screen.

好在，这将为您处理从iOS到Android的大多数样式。 尽管它不是完美的，但从一个平台到另一个平台看起来大致相同。 幕后将进行一次计算，以确定您的高度，宽度，borderWidth等在屏幕上的外观。

You can also use ‘auto’ or percentages, but you wrap it in quotes, like this:

您也可以使用“自动”或百分比，但是将其用引号引起来，如下所示：

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

包装整个屏幕 (Wrap Entire Screen)

Now, one thing to know about setting a <View> to fill the entire screen, is a phone like the iPhoneX has part of the screen covered. Normally, part of your screen which you put your elements in, will be hidden under the covered part of the screen. For this, simply use the React Native component <SafeAreaView> to wrap the rest of your components and you can be sure you will see all of your screen.

现在，关于设置<View>填充整个屏幕的一件事情要知道，就是像iPhoneX这样的手机被覆盖了一部分屏幕。 通常，放置元素的屏幕的一部分将隐藏在屏幕的覆盖部分之下。 为此，只需使用React Native组件<SafeAreaView>来包装其余的组件，就可以确保您将看到所有屏幕。

Another way is simply styling with flex: 1. Remember, React Native uses Flexbox by default so you don’t need to worry about applying display: flex to anything. But why would adding flex: 1 fill the height of the screen?

另一种方法是简单地使用flex: 1样式flex: 1 。 请记住，React Native默认使用Flexbox，因此您无需担心将display: flex应用于任何东西。 但是为什么要添加flex: 1填充屏幕的高度？

Well in React Native the default flexDirection is column, unlike in the web version. You could set the flexDirection, but if not, flex: 1 stretches down the main axis, which is by default column. And if you know Flexbox, you know that if there is no other element, flex: 1 fills the entire main-axis of the parent container.

在React Native中，默认的flexDirection是column ，与Web版本不同。 您可以设置flexDirection ，但如果没有，则设置flex: 1向下延伸主轴，默认情况下是该列。 而且，如果您知道Flexbox，就知道如果没有其他元素，则flex: 1填充父容器的整个主轴。

边距和填充 (Margins and Padding)

One of the nice things about styling in React Native is the added styles to margin and padding. Both of them come with a way to set top and bottom in one line, as well as left and right in one line. Both of them use the words, Horizontal and Vertical.

在React Native中，关于样式的一件好事是为边距和填充添加了样式。 两者都提供一种在一行中设置顶部和底部以及在一行中设置左侧和右侧的方法。 他们两个都使用了Horizontal和Vertical这个词。

For instance, to give an element a top and bottom margin of 20 you could set in like this: <View style={{marginVertical: 20}}></View>. You could also give it padding of top and bottom with paddingVertical: 20. The other is like this paddingHorizontal and marginHorizontal.

例如，要给元素的上下边界为20，可以这样设置： <View style={{marginVertical: 20}}></View> 。 您也可以使用paddingVertical: 20顶部和底部填充。 另一个像这样paddingHorizontal和marginHorizontal 。

Now these are nice, but you may notice you cannot do what you would do in the web, like this: margin: '20 0 20 0'. That won’t work in React Native.

现在这些很好，但是您可能会注意到您无法像在网络上那样做，例如： margin: '20 0 20 0' 。 这在React Native中不起作用。

There is also “Start” and “End” you can tag on the end of margin and padding. Whenever you see “start” and “end” in styles, you can know these depend on the flexDirection of the container - if the direction is row then marginStart is equal to marginLeft. If the flexDirection is row-reverse then marginStart would be equal to marginRight. Also, keep in mind, “start” and “end” override marginLeft and marginRight, paddingLeft and paddingRight.

您还可以在页边距和填充的结尾处标记“开始”和“结束”。 每当您看到样式中的“开始”和“结束”时，就可以知道它们取决于容器的flexDirection-如果方向是row则marginStart等于marginLeft 。 如果flexDirection为row-reverse则marginStart等于marginRight 。 另外，请记住，“开始”和“结束”将覆盖marginLeft和marginRight ， paddingLeft和paddingRight 。

阴影与边界 (Shadows and Borders)

The normal border style in CSS is not available in React Native styles. You have to break it down into borderColor and borderWidth. With those two indicated, you have enough for a border. Also, you can pick which side receives which color/width.

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

There’s also borderRadius, as you may be used to, that gives a radius to each corner. You can pick each individual radius with top-start, top-end, bottom-start, or bottom-end, like this: borderTopStartRadius: 20, or you can use the easier top-left, top-right, and so on. Finally, you can use borderStyle to pick from dashed, dotted, or solid borders.

您可能已经习惯了borderRadius ，它为每个角提供了半径。 您可以使用top-start ， top-end ， bottom-start或bottom-end来选择每个单独的半径，例如： borderTopStartRadius: 20 ，或者可以使用更简单的top-left ， top-right等等。 最后，您可以使用borderStyle从虚线，虚线或实线边框中进行选择。

As for shadows in React Native, you won’t be using the box-shadow you might be familiar with. Instead, React Native has styles that only work in iOS. Use these three styles: shadowOffset: { height: 3, width: 3 }, shadowColor: '#0000', shadowOpacity: 0.5, shadowRadius: 5 }. These shadows work pretty well and if you are familiar with box-shadow from the web, these will be a cinch.

至于React Native中的阴影，您将不会使用您可能熟悉的box-shadow 。 相反，React Native具有仅在iOS中起作用的样式。 使用以下三种样式： shadowOffset: { height: 3, width: 3 }, shadowColor: '#0000', shadowOpacity: 0.5, shadowRadius: 5 } 。 这些阴影效果很好，如果您熟悉Web上的盒子阴影，那将是一件容易的事。

But, in Android, there isn’t a great, built-in solution with React Native. You can set the elevation property, but this isn’t customizable and won’t work well with other styles - such as border and background colors. For Android I would suggest react-native-shadow.

但是，在Android中，React Native没有一个很棒的内置解决方案。 您可以设置elevation属性，但这不是可自定义的，因此无法与其他样式(例如边框和背景色)配合使用。 对于Android，我建议使用react-native-shadow 。

特定于平台 (Platform-Specific)

In the last section, we saw the first major difference between platforms: one has shadow styles, but the other doesn’t. Now the good thing is, in the example above, Android will simply ignore the styles it doesn’t support. It won’t work, but at least you won’t receive any errors. That’s true for the most part with all styles you’ll find that aren’t supported by a platform - it will be ignored.

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

However, you’ll find quite a lot of difference in appearance from one platform to the other, even with perfect, clean styles. It’s simply bound to happen. To make the styling look similar across platforms, let’s import the Platform component from React Native. Once imported you can set up your styles to be dynamic, platform dependent.

但是，即使使用完美，简洁的样式，您也会发现从一个平台到另一个平台的外观差异很大。 这简直是​​必然发生的。 为了使样式在各个平台上看起来相似，让我们从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 } })
  }
})

Notice the two different ways here to set platform-specific styles. One way comes after the style prop, using a ternary operator, height: Platform.OS === 'ios' ? 100, 20. This works well in most situations, but what if you don’t even want to set a style in one platform? That’s where ...Platform.select() comes in. This allows you to specify a style on one platform only, or both: ...Platform.select({ ios { width: 100 }, android: { width: 75 } }).

请注意此处设置平台特定样式的两种不同方式。 一种方式是在样式道具之后，使用三元运算符height: Platform.OS === 'ios' ? 100, 20 height: Platform.OS === 'ios' ? 100, 20 。 在大多数情况下，此方法效果很好，但是如果您甚至不想在一个平台上设置样式怎么办？ 这就是...Platform.select()来源。这允许您仅在一个平台上或在两个平台上指定样式： ...Platform.select({ ios { width: 100 }, android: { width: 75 } }) 。

其他 (Other)

Now styling gets much more deep and complex than this article can cover. You’ll notice in React Native that styles are different from component to component, unlike the web where basically every element can use every style. If you look at the official React Native docs (this is the style prop in the Text component), you will see a list of the components, and under each one, a list of styles you can use to design the component. You’ll find these a bit limited compared to the web, and some, like the Button component, don’t even have a style prop.

现在，样式变得比本文涵盖的范围更深，更复杂。 您会在React Native中注意到样式在组件之间是不同的，这与网络上基本上每个元素都可以使用每种样式的网络不同。 如果查看官方的React Native 文档 (这是Text组件中的样式道具)，您将看到一个组件列表，并且在每个组件下都有可用于设计组件的样式列表。 与网络相比，您会发现这些功能有些局限，有些功能(例如Button组件)甚至没有样式道具。

Much of the time, you can use components like <TouchableOpacity> and of course, <View>, which have most of the styling props available.

很多时候，您可以使用 <TouchableOpacity> 类的组件 ，当然也可以使用 <View> ，这些组件具有大多数可用的样式道具。

翻译自: https://www.digitalocean.com/community/tutorials/react-styling-react-native