React 原生元素用户界面入门

介绍

React Native Elements是基于 React Native components构建的预先构建组件的样式库。

React Native Elements 的主要目的是建立在基本的 React Native 组件上,为您提供更大的灵活性和方便性,以主题您的整个应用程序. 如果您曾经为整个应用程序撰写了 CSS,您可能已经找到了一些方法来节省时间并写东西一次而不是一次又一次。

<$>[注] 注: 在本文中,我们将缩写 React Native Elements 为 RNE <$>

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

前提条件

如果您想跟随这篇文章,您将需要:

• Node.js 的本地开发环境 遵循 如何安装 Node.js 并创建本地开发环境。 *熟悉设置您的环境来创建一个新的 React Native 项目和使用 iOS 或 Android 模拟器可能是有益的 *熟悉使用 React Native 中的 JSX 语法 *一些熟悉 React Native 组件

本教程已通过 Node v16.4.0、npm v7.19.0、react v16.13.1、react-native v0.63.4 和 react-native-elements v3.4.2 进行验证。

创建项目

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

1npx create-react-native-app

响应创建新项目的提示,然后导航到新项目目录。

然后,安装react-native-elements:

1npm install [email protected]

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

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

例如,此代码将使文本组件可用。

使用文本组件

React Native 元素的<Text />组件扩展到 React Native 的<Text />组件中,有更多功能可用来使用风格。

它有预配置的字体大小,您可以点击使用h1,h2,h3或h4。

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

这里有一个例子:

 1import React from 'react';
 2import { SafeAreaView, StyleSheet } from 'react-native';
 3import { Text } from 'react-native-elements';
 4
 5export default function App() {
 6  return (
 7    <SafeAreaView>
 8      <Text
 9        h1
10        h1Style={styles.h1}
11      >
12        Your Heading
13      </Text>
14    </SafeAreaView>
15  );
16}
17
18const styles = StyleSheet.create({
19  h1: {
20    backgroundColor: '#00f',
21    padding: 10,
22  },
23});

支持h1确保我们的所有主要标题在整个应用程序中都具有相同的大小,并且h1Style适用于围绕其周围的容器,如果出于任何原因,您希望对容器进行风格化。

有关更多信息,请参阅文本的官方文档(https://reactnativeelements.com/docs/text)。

使用按钮组件

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

举这个例子:

 1import React from 'react';
 2import { SafeAreaView } from 'react-native';
 3import { Button } from 'react-native-elements';
 4
 5export default function App() {
 6  return (
 7    <SafeAreaView>
 8      <Button
 9        containerStyle={{ height: 500 }}
10        buttonStyle={{ height: '100%' }}
11        title='button title'
12      />
13    </SafeAreaView>
14  );
15}

在此代码中,RNE 内部的<View>组件<Button />被containerStyle定义为500的高度,但是,如果您不包括buttonStyle={{high:100%"}},则按钮将保持其默认的高度。只有View将占用屏幕的500像素。这就是给buttonStyle口音的高度为100%的地方,将填补整个View的高度。

您可能已经注意到,此组件在 iOS 上与TouchableOpacity和TouchableNativeFeedback的默认状态。

1TouchableComponent={TouchableHighlight}

您可以将按钮的类型设置为清晰,清晰或默认固态:

• 固态 是默认值,包括背景,即使在 iOS
• ``outline` 默认值为没有背景,但保持薄的背景
• `clear’ 默认值为没有背景和没有背景。

您还可以添加升高的支撑,以便为您的按钮提供带有盒子阴影的升高的外观。

有许多其他方法可以为您的按钮添加风格:

• 您还可以设置一个加载插件,以便在按钮上显示加载指标,并将其格式化
• 您可以使用titleStyle来格式化标题文本
• 您还可以设置一个disabledStyle插件,以便定制一个自定义的禁用外观,以及一个disabledTitleStyle
• 最后,您甚至可以为按钮提供线性降级设计

有关更多信息,请参阅按钮的官方文档(https://reactnativeelements.com/docs/button)。

使用Icon组件

图标是通过反应原生 vector 图标实现的。

您还可以将一个图标放置在按钮中使用图标插头. 这是一个插头在几个组件中,您可以插入图标组件或另一种方式,一个对象。 它将默认地将图标在按钮中中心,然后将被推到文本的左侧,如果有文本在标题插头中。

在图标组件中,名称标签很重要 - 它匹配官方图标名称,如果没有找到,您只会看到一个问题标记,而不是所需的图标。

以下是 支持的图标的完整列表。每个部分都有一个标题,指示图标的类型。这包括entypo,feather和fontawesome。

这里有一个例子:

 1import React from 'react';
 2import { SafeAreaView } from 'react-native';
 3import { Button } from 'react-native-elements';
 4
 5export default function App() {
 6  return (
 7    <SafeAreaView>
 8      <Button
 9        icon={{ name: "mail", size: 15, type: 'entypo', color: "black" }}
10        iconRight
11        title="Mail"
12      />
13    </SafeAreaView>
14  );
15}

此代码将导致如下:

您还可以用以下代替上面的示例中的对象:

 1import React from 'react';
 2import { SafeAreaView } from 'react-native';
 3import { Button, Icon } from 'react-native-elements';
 4
 5export default function App() {
 6  return (
 7    <SafeAreaView>
 8      <Button
 9        icon={<Icon name="mail" size={15} type="entypo" color="white" />}
10        iconRight
11        title="Mail"
12      />
13    </SafeAreaView>
14  );
15}

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

再一次,React Native Elements的所有组件都被包装在一个<View>,所以你通常可以依赖的优惠之一是containerStyle - 这里适用于<Icon /> 然后,而不是ButtonStyle,你可以用iconStyle来格式化图标本身。当然,这只需要如果你想要格式化超出内置的优惠选项。现在,了解区别是很重要的 - 你可以用iconContainerStyle来格式化母子<Button />中的图标容器,这与<Icon />组件中的containerStyle为相同。

您还可以使用反向屏幕来使图标看起来像按钮。图标背后有圆形边界,但默认情况下无法看到。使用反向屏幕,您的图标会变成白色(除非您专门设置为反向颜色),而圆圈的背景颜色会被填充给您指定的任何颜色(默认为黑色)。

有关更多信息,请参阅Icon的官方文档(https://reactnativeelements.com/docs/icon)。

使用SearchBar和Input组件

RNE中的一个非常有用的组件是<SearchBar />。它以标准<TextInput />所拥有的所有特性开始,就像RNE<Input />组件一样,但它添加了一些风格特性。除了一些命名差异外,<SearchBar />大多只是RNE<Input />的专门版本。

当你开始键入时,你会注意到极右边的 x。这是你的默认clearIcon预告片 - 当你使用<Input />组件时,这将相当于你的rightIcon预告片。

一个重要的事情要记住的是,图标配有可设计的容器 - 您可以使用leftIconContainerStyle或rightIconContainerStyle来设计。

取消按钮有点麻烦,但有一种方式让它出现是这样的:

 1import React from 'react';
 2import { SafeAreaView } from 'react-native';
 3import { SearchBar } from 'react-native-elements';
 4
 5export default class App extends React.Component {
 6  state = {
 7    search: '',
 8  };
 9
10  updateSearch = (search) => {
11    this.setState({ search });
12  };
13
14  render() {
15    const { search } = this.state;
16
17    return (
18      <SafeAreaView>
19        <SearchBar
20          platform='ios'
21          cancelButtonTitle='cancel'
22          onChangeText={(search) => { this.updateSearch(search) }}
23          value={search}
24        />
25      </SafeAreaView>
26    );
27  }
28}

此代码将导致如下:

将平台设置为ios和cancelButtonTitle到您想要的任何文本将使按钮在SearchBar集中时在两个平台上出现(默认行为)。

在<SearchBar>组件中,你可以将<View />设置为containerStyle,而SearchBar在这里具有inputContainerStyle的配置,以在内部围绕TextInput设计一个内部容器。要将TextInput格式设置为你写文本的框,请使用inputStyle - 它格式化了文本容器,但不包括图标。inputContainerStyle容器确实包含了图标。这些图标与<SearchBar />和Input />相同 - 您将看到SearchBar的默认值在containerStyle上缩小并在inputContainerStyle上圆形边界。

在SearchBar />和Input />之间的一个区别是,搜索似乎需要设置值,正如上面的示例所示。没有它和onChangeText调用更新值,它不允许您输入任何东西。

结论

在本文中,您探索了 React Native Elements 提供的一些组件:文本,按钮,图标,搜索栏和输入。

React Native Elements 充满了组件和方式来定制您的应用程序. 有许多预先构建的补丁,可以节省大量的时间,并消除数小时的手动造型和移动元素的像素比像素。

这里比我们所涵盖的要多得多,比如一个很好的<Rating />组件,但是有了这里的基本理解,你应该能够了解其余的功能。

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