看看React Native Elements UI工具包

React Native Elements is a styling library with pre-built components to replace the basic, limited React Native components. It’s similar to Bootstrap, giving you useable styles that are broad enough to customize as your own. Every one of the components in React Native Elements is wrapped with the basic React Native component with styling based on the props you indicate.

React Native Elements是带有预构建组件的样式库，用于替换基本的有限React Native组件 。 它与Bootstrap相似，为您提供了可用的样式，这些样式足够广泛，可以根据您的需要进行自定义。 React Native Elements中的每个组件都包装有基本的React Native 组件，该组件具有根据您指定的道具进行样式设置的样式。

Throughout this article, we’ll abbreviate React Native Elements as RNE. We’ll go through the basics so you can understand how to use other components from RNE not discussed. But before we get there, let’s look at the basic installation.

在本文中，我们将React Native Elements简称为RNE。 我们将讲解基础知识，以便您了解如何使用RNE中未讨论的其他组件。 但是在到达那里之前，让我们看一下基本安装。

安装 (Installation)

$ npm i react-native-elements
// or
$ yarn add react-native-elements

If you’re not using Expo but the basic React Native CLI, you’ll need to install react-native-vector-icons. You will likely need to link as well by running: react-native link react-native-vector-icons.

如果您不是使用Expo而是使用基本的React Native CLI，则需要安装react-native-vector-icons 。 您可能还需要通过运行以下命令进行链接： react-native link react-native-vector-icons 。

Now that we have the library installed, it’s ready to use, and we can import any component from it like this: import { Icon } from 'react-native-elements';

现在我们已经安装了库，可以使用它了，我们可以从中导入任何组件，例如： import { Icon } from 'react-native-elements';

文本元素以及为什么要响应本机元素？ (Text Element and Why React Native Elements?)

The primary purpose of React Native Elements is building on top of the basic React Native components to give you more flexibility and ease to theme your entire app. If you’ve ever written CSS for an entire app, you have probably found ways to save yourself some time and write things once instead of over and over. Can someone say “DRY”? Using RNE is perfect for this, as it is already written into the pre-built components, and you just need to use the same props.

React Native Elements的主要目的是在基本的React Native组件的基础上构建，从而为您提供更大的灵活性，并更轻松地为整个应用程序设置主题。 如果您曾经为整个应用程序编写过CSS，那么您可能已经找到了节省时间的方法，而不必一次又一次地编写东西。 有人可以说“干”吗？ 为此，使用RNE非常完美，因为它已被写入到预先构建的组件中，而您只需要使用相同的道具即可。

The RNE component is a perfect example of this. It is the basic component from React Native, but with more props to style with. It has font-sizes pre-configured, which you can tap into, using either h1, h2, h3, or h4. The corresponding font sizes are 40, 34, 28, and 22. On top of that, there’s a prop for each heading size, like h1Style, h2Style, and so on. These apply to the container around the text. Look at the following example:

RNE 组件就是一个很好的例子。 它是React Native的基本组件，但还有更多样式支持。 它具有预先配置的字体大小，您可以使用h1 ， h2 ， h3或h4 。 相应的字体大小为h1Style和22。最重要的是，每个标题大小都有一个支持，例如h1Style ， h2Style等等。 这些适用于文本周围的容器。 看下面的例子：

Your Heading

Now we know our heading has a font-size of 34. That h2 is all we need and we can be sure all of our primary headings are the same size across our entire app. And the h2Style is for the container around it, if for any reason you wish to style the container. Of course, there are other ways to make it even more customizable to your own needs, but as you can see here, it’s easy to create a theme with the pre-built RNE components.

现在我们知道标题的字体大小为h2是我们所需要的，并且我们可以确保所有主要标题在整个应用程序中都相同。 如果您出于某种原因希望对容器进行样式设置，则h2Style用于其周围的容器。 当然，还有其他方法可以使它更加个性化，以满足您自己的需要，但是正如您在此处看到的那样，使用预构建的RNE组件创建主题很容易。

实施按钮元素 (Implement Button Element)

As discussed above, every component from RNE is already wrapped in a (that’s the container styled by h2style in the component above). What that means, is you can get away from manually wrapping all your components with a and instead you simply need to style the component with its prop: containerStyle. Take this example for instance:

如上所述，RNE中的每个组件都已经包装在 (这是上面组件中h2style样式的容器)。 这意味着您可以摆脱使用手动包装所有组件的 ，而只需要使用prop： containerStyle设置组件的样式即可。 以这个例子为例：

import { Button } from 'react-native-elements';
import { SafeAreaView } from 'react-native';

const App = () => (
  
    
  
)

What’s going on here? The component inside the RNE is styled by containerStyle to have a height of 500. But, if you didn’t include the buttonStyle={{height: '100%'}}, the button would remain its default height (nowhere near 500). Only the View would be taking up 500 pixels of the screen. That’s where giving the buttonStyle prop a height of 100% will fill the entire View height. The buttonStyle styled the button itself and you’ll find this pattern followed in most all the RNE components.

这里发生了什么？ RNE

内的组件由containerStyle设置为高度为500。但是，如果不包括buttonStyle={{height: '100%'}} ，则该按钮将保持其原样。默认高度(不超过500)。 仅“视图”将占用屏幕的500像素。 那就是给buttonStyle道具设置100％的高度将填充整个View高度的地方。 buttonStyle了按钮本身的样式，您将在大多数RNE组件中找到该模式。

There are plenty of other styles to give a button, like you may notice that this component defaults with TouchableOpacity on iOS and TouchableNativeFeedback for Android. These defaults can be changed with the TouchableComponent prop, like: TouchableComponent={TouchableHighlight}.

还有很多其他的样式，为一个按钮，就像你可能会注意到，该组件默认与TouchableOpacity iOS和TouchableNativeFeedback为Android。 可以使用TouchableComponent更改这些默认值，例如： TouchableComponent={TouchableHighlight} 。

You can set the type of button to “clear”, “outline”, or the default “solid” like: type='outline'. This is pretty simple; “solid” is the default and includes a background, even in iOS. “Outline” defaults to no background, but keeps a thin outline, and “clear” defaults to no background and no outline. You can also add the raised prop to give your button a raised appearance with a box shadow.

您可以将按钮的类型设置为“ clear”，“ outline”或默认的“ solid”，例如： type='outline' 。 这很简单； 默认为“ solid”，包括背景，即使在iOS中也是如此。 “轮廓”默认为无背景，但保留较薄的轮廓，“透明”默认为无背景且无轮廓。 您还可以添加raised道具，以使按钮具有带阴影的凸起外观。

There are plenty of other ways to add style to your button: you can also set a loading prop to display a loading indicator on the button and style it. You can style the title text with titleStyle. You can set a disabledStyle prop as well for a custom disabled look, as well as a disabledTitleStyle. Finally, you can even give your button a linear-gradient design. For more info, see the official docs.

还有很多其他方法可以为按钮添加样式：您还可以设置loading道具，以在按钮上显示加载指示器并为其设置样式。 您可以使用titleStyle设置标题文本的titleStyle 。 您可以设置disabledStyle自定义禁用的外观，以及道具以及disabledTitleStyle 。 最后，您甚至可以为按钮提供线性渐变设计。 有关更多信息，请参阅官方文档 。

图示 (Icons)

You can also put an icon in the button with the icon prop. This is a prop in a few of the components, where you can insert the Icon component, or just an object. It will default to center the icon in the button, then it will be pushed to the left of the text, if there is text in the a title prop. You can switch this to the right side of the text with the iconRight prop.

您还可以使用icon prop将图标放入按钮。 这是一些组件的Struts，您可以在其中插入Icon组件，也可以只插入一个对象。 默认情况下，图标会在按钮中居中，如果title道具中包含文本，则将其推到文本的左侧。 您可以使用iconRight将其切换到文本的iconRight 。

Within the icon component, the name prop is important - it matches to the official icon name and if it isn’t found, you will only see a question mark instead of the desired icon. Here’s the full list of icons (in this site, the long red banner is what you put in the type prop as in the example below, and then put the name of the icon in the name prop). Here is an example:

在图标组件中，名称prop很重要-它与官方图标名称匹配，如果找不到，则只会看到一个问号，而不是所需的图标。 这是图标的完整列表 (在此站点中，长长的红色横幅是您在prop中type的内容，如下面的示例所示，然后在name prop中放置了图标的name )。 这是一个例子：

Note that if you use FontAwesome Icons, you might need import the Icon component like this: import Icon from 'react-native-vector-icons/FontAwesome5';

请注意，如果使用FontAwesome图标，则可能需要像这样import Icon from 'react-native-vector-icons/FontAwesome5';组件： import Icon from 'react-native-vector-icons/FontAwesome5';

Icons are possible through the react-native-vector-icons. One type of an icon might look different than another type. You may notice we are just putting an object in the icon prop. You can also replace the object in the example above with the following

}>. This is using the RNE component and any time you use icons in RNE, you can implement either way.

图标可以通过react-native-vector-icons 。 一种图标的外观可能与另一种图标不同。 您可能会注意到我们只是在图标prop中放置了一个对象。 您还可以使用以下

}>替换上面示例中的对象。 这是使用RNE 组件，并且每次在RNE中使用图标时，都可以实现其中一种方法。

Again, all React Native Elements components are wrapped in a , so one of the props you can generally count on is containerStyle - that applies here for . Then, instead of buttonStyle, you can style the icon itself with iconStyle. Of course this is only needed if you desire to style beyond the built-in props. Now, it is important to see the distinction, you can style the icon container with a prop in the parent

with iconContainerStyle, which would be the same as the containerStyle prop within the component.

同样，所有React Native Elements组件都包装在 ，因此通常可以指望的道具之一就是containerStyle在这里适用于 。 然后，而不是buttonStyle ，你可以风格的图标本身iconStyle 。 当然，仅当您希望样式超出内置道具时才需要这样做。 现在，重要的是要看到区别，您可以使用iconContainerStyle在父

使用prop设置图标容器的样式，这与组件中的containerStyle iconContainerStyle相同。

You can also make icons look like buttons, using the reverse prop. There is a circular border behind icons, but it is normally invisible. With reverse, your icon becomes white (unless you set it specifically with reverseColor), while the background color of the circle is filled-in with whatever color you have specified (defaults to black). If you give your icon a raised prop, the circle background will show up, with a default white fill, unless you have reverse as well. The circle background will receive the raised box shadow, not the icon itself.

您还可以使用reverse道具使图标看起来像按钮。 图标后面有一个圆形边框，但是通常是不可见的。 使用reverse ，图标变为白色(除非您使用reverseColor专门设置)，而圆圈的背景色则用您指定的任何color填充(默认为黑色)。 如果为图标提供raised道具，除非您也有reverse设置，否则圆圈背景将以默认的白色填充显示。 圆圈背景将收到raised框阴影，而不是图标本身。

搜索栏和输入 (SearchBar & Input)

One very useful component in RNE is the . It begins with all the props a standard would have, just as the RNE component does, but it adds some style props. Besides a few naming differences, is largely just a specialized version of the RNE . Right out of the gate, has a magnifying-glass icon at the far left (this is your default searchIcon prop), and a dark background. The searchIcon prop is basically the leftIcon prop when using the more generic .

RNE中一个非常有用的组件是 。 它以标准会具有的所有道具开始，就像RNE 组件一样，但是它添加了一些样式道具。 除了命名上的一些区别外， 基本上只是RNE 的专用版本。 就在大门外，最左侧有一个放大镜图标(这是您的默认searchIcon道具)，并且背景较暗。 当使用更通用的时， searchIcon道具基本上是leftIcon道具。

When you start typing, you’ll notice an “x” at the far right (your default clearIcon prop - which would be equivalent to your rightIcon prop when using component). When you press the “x” icon, it clears the text, which can be handled with the onClear callback prop. One important thing to remember is that the icons come with style-able containers - you can style with leftIconContainerStyle or rightIconContainerStyle (this would be styling the icon container in the component, not the itself).

当您开始输入clearIcon ，您会在最右边看到一个“ x”(您的默认clearIcon道具-与使用组件时的rightIcon道具等效)。 当您按下“ x”图标时，它将清除文本，可以使用onClear回调道具进行处理。 要记住的重要一件事是图标带有可设置样式的容器-您可以使用leftIconContainerStyle或rightIconContainerStyle进行样式rightIconContainerStyle (这将在组件中设置图标容器的样式，而不是本身)。

The cancel button is a bit trickier, but a basic way to have it show up is like this:

取消按钮有点棘手，但是显示它的基本方法是这样的：

 { updateSearch(search) }} value={search} />

Having the platform set to ‘ios’ and the cancelButtonTitle to whatever text you desire will make the button show up on both platforms when the SearchBar is focused (default behavior), with a nice blue text like you have probably seen before. It triggers an onCancel callback. You will also find the default dark theme will turn off when adding this cancel button.

将平台设置为“ ios”，并将cancelButtonTitle设置为所需的任何文本，这会使SearchBar处于焦点状态时按钮在两个平台上都显示出来(默认行为)，并带有漂亮的蓝色文本，就像您之前看到的那样。 它触发一个onCancel回调。 您还会发现添加此取消按钮时，默认的深色主题将关闭。

In the component, you can set the with containerStyle, and SearchBar here has the prop inputContainerStyle to style an inner container around the TextInput within. To style the TextInput, the box where you write your text, use inputStyle - this styles the text container, but doesn’t include the icons. The inputContainerStyle container does include the icons. These are the same with and - you will see the defaults with padding on the containerStyle and rounded borders on inputContainerStyle.

在组件中，可以使用containerStyle设置 ，并且SearchBar在此处具有inputContainerStyle可以在其中的TextInput周围设置内部容器的样式。 为了风格TextInput ，你写你的文字，使用箱inputStyle -这种风格的文字容器，但不包括的图标。 inputContainerStyle容器确实包含图标。 这些与和 -您将看到默认值，在containerStyle上带有填充，在inputContainerStyle上带有圆形边框。

One difference between and is the search seems to require setting the value as seen in the example above. without it and the onChangeText callback updating the value, it doesn’t allow you to type anything. This isn’t true of . Also with the component, you can set up a label and error message, each will be within the outer .

和之间的区别是搜索似乎需要设置value如上例所示。 如果没有它，并且onChangeText回调会更新该值，则不允许您键入任何内容。 并非如此。 同样，使用组件，您可以设置标签和错误消息，每个标签和错误消息都位于外部的 。

进一步阅读 (Further Reading)

React Native Elements is full of components and ways to customize your application. There is much more than we covered here, such as a nice component that’s easy to pick up and use, but with the basic understanding here, you should be able to pick up on how the rest of it works. There are bunch of pre-built props that can save you plenty of time and take away hours of manual styling, moving pixel by pixel.

React Native Elements充满了自定义应用程序的组件和方法。 除了我们在这里介绍的内容之外，还有很多其他内容，例如一个很好的组件，它很容易使用和使用，但是通过这里的基本了解，您应该能够了解其余组件的工作方式。 有一堆预建的道具可以节省您大量时间，并省去数小时的手动样式，从而逐像素移动。

The official docs is a great place to look through their components and find what props you can use in each component and how to implement them.

官方文档是查看其组件并查找可以在每个组件中使用哪些道具以及如何实现它们的好地方。

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