简介

React Native Elements是一个样式库,其中包含基于React Native 组件的预构建组件。 React Native Elements 中的每个组件都使用 React Native<View />组件包装,其样式基于您指定的道具。

React Native Elements 的主要目的是构建在基本的 React Native 组件之上,从而为您提供更大的灵活性和轻松的主题化整个应用程序。如果您曾经为整个应用程序编写过 CSS,那么您可能已经找到了节省一些时间并编写一次而不是一遍又一遍的方法。使用 React Native Elements 允许您使用预构建的组件并自定义或扩展它们以重用相同的道具。

注意: 在本文中,我们将 React Native Elements 缩写为 RNE。

在本文中,您将探索 React Native Elements 提供的一些组件。您将能够将在这里学到的知识应用到其他组件中。

先决条件

如果您想继续阅读本文,您将需要:

• Node.js 的本地开发环境。关注如何安装 Node.js 并创建本地开发环境。

• 熟悉设置环境以创建新的 React Native 项目并使用 iOS 或 Android 模拟器可能会有所帮助。

• 熟悉在 React Native 中使用 JSX 语法。

• 对 React Native 组件有一定的了解。

本教程已使用 Node v16.4.0、npmv7.19.0、reactv16.13.1、react-nativev0.63.4 和react-native-elementsv3.4.2 进行了验证。

设置项目

首先,使用create-react-native-app创建一个新的 React Native 应用程序:

npx create-react-native-app

回答创建新项目的提示。然后导航到新的项目目录。

然后,安装react-native-elments:

npm install react-native-elements@3.4.2

现在我们已经安装了库,可以使用它了,我们可以像这样从中导入任何组件:

import { Text } from 'react-native-elements';

例如,此代码将使Text组件可供使用。

使用Text组件

React Native Element 的<Text />组件在 React Native 的<Text />组件的基础上扩展了更多的 props 来设置样式。

它具有预先配置的字体大小,您可以使用h1、h2、h3或h4来使用它们。相应的字体大小为40、34、28和22。

每个标题大小都有一个道具,例如h1Style、h2Style等。这些适用于文本周围的容器。

这是一个例子:

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { Text } from 'react-native-elements';

export default function App() {
  return (
    <SafeAreaView>
      <Text
        h1
        h1Style={styles.h1}
      >
        Your Heading
      </Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  h1: {
    backgroundColor: '#00f',
    padding: 10,
  },
});

道具h1确保我们所有的主要标题在我们的整个应用程序中都是相同的大小。如果出于任何原因您希望为容器设置样式,则h1Style用于它周围的容器。

更多信息,参考官方文档Text。

使用Button组件

如前所述,来自 RNE 的每个组件都已经包装在<View />中。这就是上面<Text>组件中h1style样式的容器。这使您无需手动添加父容器<View />组件。您可以使用containerStyle向此父容器添加样式。

以这个例子为例:

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

export default function App() {
  return (
    <SafeAreaView>
      <Button
        containerStyle={{ height: 500 }}
        buttonStyle={{ height: '100%' }}
        title='button title'
      />
    </SafeAreaView>
  );
}

在此代码中,RNE<Button />中的<View>组件由containerStyle设置样式,高度为500。但是,如果您不包括buttonStyle={{height: '100%'}},则按钮将保持其默认高度。只有View会占用屏幕的500像素。这就是给buttonStyle道具高度100%将填满整个View高度的地方。buttonStyle本身就是Button的样式。您会发现几乎所有 RNE 组件都遵循这种模式。

还有很多其他样式可以提供按钮。您可能已经注意到,此组件在 iOS 上默认为TouchableOpacity,在 Android 上默认为TouchableNativeFeedback。可以使用TouchableComponent属性更改这些默认值:

TouchableComponent={TouchableHighlight}

您可以将按钮的type设置为"clear"、"outline"或默认的"solid":

• "solid"是默认值,包括背景,即使在 iOS 中也是如此。

• "outline"默认为无背景,但保持细轮廓。

• "clear"默认为无背景和无轮廓。

您还可以添加raised道具,使您的按钮具有框阴影的凸起外观。

还有很多其他方法可以为按钮添加样式:

• 你也可以设置一个loading属性来在按钮上显示一个加载指示器并设置它的样式。

• 您可以使用titleStyle设置标题文本的样式。

• 您可以设置disabledStyle道具以及自定义禁用外观,以及disabledTitleStyle。

• 最后,你甚至可以给你的按钮一个线性渐变设计。

更多信息,参考官方文档Button。

使用Icon组件

图标可以通过react-native-vector-icons。

您还可以使用icon属性在按钮中放置一个图标。这是一些组件中的一个道具,您可以在其中插入Icon组件或对象。它将默认将按钮中的图标居中,然后如果title属性中有文本,它将被推到文本的左侧。您可以使用iconRight属性将其切换到文本的右侧。

在Icon组件中,name属性很重要 - 它与官方图标名称匹配,如果未找到,您将只会看到一个问号而不是所需的图标。

这是支持图标的完整列表。每个部分都有一个标题,指示type的图标。这包括"entypo"、"feather"和"fontawesome"。每个type的图标设计通常会有所不同。

这是一个例子:

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

export default function App() {
  return (
    <SafeAreaView>
      <Button
        icon={{ name: "mail", size: 15, type: 'entypo', color: "black" }}
        iconRight
        title="Mail"
      />
    </SafeAreaView>
  );
}

此代码将导致以下结果:

您还可以将上面示例中的对象替换为以下内容:

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

export default function App() {
  return (
    <SafeAreaView>
      <Button
        icon={<Icon name="mail" size={15} type="entypo" color="white" />}
        iconRight
        title="Mail"
      />
    </SafeAreaView>
  );
}

这是使用 RNE<Icon />组件,任何时候在 RNE 中使用图标,都可以实现。

同样,所有 React Native Elements 组件都包装在<View>中,因此您通常可以指望的道具之一是containerStyle- 在此处适用于<Icon />。然后,您可以使用iconStyle代替buttonStyle来设置图标本身的样式。当然,仅当您希望超越内置道具的样式时才需要这样做。现在,了解区别很重要 - 您可以使用iconContainerStyle父级<Button />中的道具设置图标容器的样式,这与<Icon />组件中的containerStyle道具相同。

您还可以使用reverse属性使图标类似于按钮。图标后面有一个圆形边框,但默认不可见。使用reverse,您的图标变为白色(除非您专门使用reverseColor设置它),而圆圈的背景颜色将使用您指定的任何color填充(默认为黑色)。如果你给你的图标一个raised属性,圆形背景会出现,默认填充为白色,除非你也有reverse。圆形背景将收到raised框阴影,而不是图标本身。

更多信息,参考官方文档Icon。

使用SearchBar和Input组件

RNE 中一个非常有用的组件是<SearchBar />。它以标准<TextInput />的所有道具开始,就像 RNE<Input />组件一样,但它添加了一些样式道具。除了一些命名差异之外,<SearchBar />在很大程度上只是 RNE<Input />的一个特殊版本。就在大门外,<SearchBar />在最左边有一个放大镜图标(这是您的默认searchIcon道具)和深色背景。当使用更通用的<Input />时,searchIcon道具基本上是leftIcon道具。

当您开始输入时,您会注意到最右侧有一个 x。这是您的默认clearIcon道具 - 相当于使用<Input />组件时的rightIcon道具。当您按下 x 图标时,它会清除文本,可以使用onClear回调属性处理。

要记住的一件重要事情是图标带有可样式化的容器 - 您可以使用leftIconContainerStyle或rightIconContainerStyle设置样式。这将在<SearchBar />组件中设置图标容器的样式,而不是<Icon />本身。

取消按钮有点棘手,但显示它的一种方法是:

import React from 'react';
import { SafeAreaView } from 'react-native';
import { SearchBar } from 'react-native-elements';

export default class App extends React.Component {
  state = {
    search: '',
  };

  updateSearch = (search) => {
    this.setState({ search });
  };

  render() {
    const { search } = this.state;

    return (
      <SafeAreaView>
        <SearchBar
          platform='ios'
          cancelButtonTitle='cancel'
          onChangeText={(search) => { this.updateSearch(search) }}
          value={search}
        />
      </SafeAreaView>
    );
  }
}

此代码将导致以下结果:

将平台设置为'ios'并将cancelButtonTitle设置为您想要的任何文本将使按钮在SearchBar聚焦时显示在两个平台上(默认行为)。它触发onCancel回调。您还会发现添加此取消按钮时默认的深色主题将关闭。

在<SearchBar>组件中,您可以将<View />设置为containerStyle,而SearchBar在这里有道具inputContainerStyle来设置围绕TextInput内部的容器的样式。要设置TextInput的样式,即您在其中编写文本的框,请使用inputStyle- 这会设置文本容器的样式,但不包括图标。inputContainerStyle容器确实包含图标。这些与<SearchBar />和<Input />相同 - 您将看到<SearchBar />默认值,在containerStyle上有填充,在inputContainerStyle上有圆角边框。

<SearchBar />和<Input />之间的一个区别是搜索似乎需要设置value,如上例所示。没有它和onChangeText回调更新值,它不允许你输入任何东西。<Input />不是这样。同样使用<Input />组件,您可以设置标签和错误消息,每个都将在外部<View />内。

结论

在本文中,您探索了 React Native Elements 提供的一些组件:Text、Button、Icon、SearchBar和Input。

React Native Elements 充满了自定义应用程序的组件和方法。有许多预先构建的道具可以为您节省大量时间,并消除数小时的手动造型和逐像素移动元素。

除了我们在这里介绍的内容之外,还有很多其他内容,例如一个不错的<Rating />组件,但是有了这里的基本了解,您应该能够了解它的其余部分是如何工作的。

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