学习ReactNative的基本组件

React Native 的工作方式很像 React，实现了 JSX、状态和道具。当然，React Native 是建立在 Native 组件之上的，而不是 HTML 元素。因此，如果你熟悉普通的 React，那么上手 React Native 会很容易，只要你能理解使用的不同组件即可。在本指南中，我们将浏览 React Native 使用的基本 Native 组件。

与 Web 的 React 不同，React Native 要求您导入项目中的每个组件 - 毕竟，每个组件都设置为在 Android 和 iOS 中都可以工作。这就是我们使用 React Native 的原因，更不用说能够用 JavaScript 编写所有东西了。要导入每个组件，我们只需将其添加到导入的对象中：

import { Text, View } from "react-native";

Text 和 View 是任何 React Native 应用程序的两个最基本的构建块。它们是任何人学习 React Native 的最佳起点。

文本和视图

你可以猜到，<Text></Text> 是页面中任何文本的包装器。该组件类似于 HTML 中的 <p> 标签。现在，类似于 <div></div> 标签，您可以将 <Text></Text> 包装在 <View></View> 中。没错，<View> 的行为与 <div> 非常相似，基本思想是它是一个非常适合分割和设置页面样式的容器。

这是 React Native 页面的基本设置：

import React from "react";
import { View, Text } from "react-native";

export default class App extends React.Component {
  render() {
    return (
      <View>
        <Text> Hello World! </Text>
      </View>
    );
  }
}

<Text> 和 <View> 组件都有样式属性，您可以在其中设置颜色、大小等。但是，有一些重要的区别需要牢记。尽管 View 的工作方式与 div 元素类似，但您不能在其中包含任何文本，例如 <View>this text doesn't work</View> （不是您应该使用 [X146X ] 元素）。这会导致异常，这就是我们使用 <Text> 组件的原因。

说到 <Text> 组件，您可以像这样在其中包装另一个组件：

<Text style={{ color: red }}>
  <Text style={{ fontSize: 24 }}>Here is the first text </Text>
  <Text style={{ fontSize: 14 }}>And the second text.</Text>
</Text>

// comes out as 'Here is the first text And the second text'

当 <Text> 换行 <Text> 时，假设有足够的空间，嵌套文本将出现在同一行。但是，如果将两个 <Text> 组件包装在 <View> 中，它们将出现在不同的行上。

文本输入

这个组件有点像 <input> HTML 元素，但正如其名称所示，它仅用于文本输入。您可以使用 onChangeText 来检测 <TextInput> 组件中文本的更改，而不是使用 onChange 回调。您可以使用 onChange，但它会返回一个对象：{ nativeEvent: { eventCount, target, text} }。

除此之外，这个组件还有很多很酷的功能。您可以通过keyboardType设置手机上拉哪个键盘（如keyboardType='email-address'），切换自动更正功能，设置手机的textContentType自动填充文本（就像您钥匙串上的密码）等等。

按钮和警报

<Button /> 组件是我注意到的第一个与它的兄弟（HTML <button> 元素）有重大区别的组件。 React Native <Button /> 有一个 onPress() 属性，而不是任何与点击相关的东西。它还有一个 title 属性用于其中的文本。最后，它没有样式道具，只有颜色道具。

最后一点是一个很大的区别。现在您可以（并且会）将其包装在 View 中并使用该包装器对其进行样式设置。这是处理 React Native 组件的一些限制的常用方法，您可能会发现自己一直使用 View 来包装其他组件。我发现自己更经常使用的是我们稍后会介绍的组件 - <TouchableOpacity >。

我还发现这个基本的 Button 组件的有趣之处在于，在 iOS 平台上，它只显示为标题中的文本 - 没有背景。因此，color 属性只会改变文本颜色，虽然在 Android 上它会改变按钮的背景颜色。

这是一个 Button 组件的快速示例。

<Button
  onPress={() => Alert.alert("button pressed!")}
  title="alert button"
  color="blue"
/>

注意：我们使用的 Alert 也是从 React Native 核心导入的。这将在我们的屏幕顶部显示一个警报，类似于 web alert()。

图像和图像背景

<Image /> 组件与 HTML img 标记非常相似。但是，有一些区别，例如将 src 属性更改为 source。此外，源本身的操作方式不同：对于本地图像，您可以使用 require 导入它们，例如 <Image source={require('path/to/local/image)} />。

此外，在 source 属性中，您可以像这样使用 URI：<Image source=模板:Uri: 'https://imagesite.com/path/to/image' style=模板:Height: 100, width: 100, resizeMode: contain。注意 uri 是一个对象，所以它需要另一组花括号，就像内联样式一样。这里还有很多其他的 props 可以查看，但常用的一个是 resizeMode。这决定了如何调整图像大小以及如何将图像放入父 View 组件中。

ImageBackground 组件类似于 <Image /> 组件，因为它接收相同的道具，但这里的主要区别是它可以有子元素。 <Image /> 组件是自动关闭的。关于 ImageBackground 的事情是，它非常基本，设置背景图像的更好解决方案可能是构建自己的组件或简单地将 Image 设置为具有较低不透明度和后面的绝对一切。

可触摸的

在 React Native 中你会注意到的一件事是，我们介绍的许多组件没有你通常会在 Web 应用程序中实现的所有道具。 <Image /> 组件没有 onPress 属性，<Button /> 组件没有 style 属性。任何 Touchable 组件都可以在这里真正提供帮助。

例如，您可以将任何图像组件包装在 Touchable 中：

<TouchableHighlight onPress={this.pressHandle}>
  <Image />
</TouchableHighlight>

上例中的 TouchableHighlight 就像一个容器，按下时具有一个功能，包括内置动画。您也可以在 Touchable 组件中添加 View 和 Text 组件，就像 <Button /> 一样，但具有可自定义的样式。

现在有一些不同的 Touchable 组件，例如：

TouchableHighlight：按下时，使背景变暗。
TouchableOpacity：按下时，使按钮的不透明度变暗。
TouchableNativeFeedback：仅限 Android 的涟漪效应。
TouchableWithoutFeedback：没有任何反馈/效果的按压。

这些动画在按下时发生。 Touchable 组件也有自己独特的道具，您可以根据自己的喜好进行自定义。

ScrollView、SafeAreaView 和 FlatList

到目前为止，我们已经了解了 React Native 应用程序的所有基本构建块。但是，还有更多，而且您很快会发现一件事是，如果内容高度或宽度超过屏幕尺寸，手机屏幕将不会自动滚动。这可能会让您感到惊讶，当您将所有内容都包装在 View 组件中时，溢出将被隐藏。

这就是 ScrollView 的简单实现出现的地方。 ScrollView 组件是启用滚动的基本组件。但是，FlatList 也可以滚动，但它的容量比 ScrollView 大得多。

现在，ScrollView 的基本设置是为可滚动视图提供边界，这很可能是屏幕高度和宽度。像图像一样，您可以包装 ScrollView 以赋予它这些边界。通常，您可以为此使用普通的 View 组件，但如果您有 iPhone X，您可能会发现您的 View 在圆角或传感器集群后面上升。 SafeAreaView 会处理这个问题，提供足够的填充，以便整个屏幕都可见。无论哪种方式，要拉伸整个屏幕，您只需将父视图的样式设置为 flex: 1。

当所有元素的高度在本地确定时，使用 ScrollView 的设置将起作用 - 例如，页面的高度将始终设置为相同。如果有影响内容尺寸的数据传入，则可能难以确定 ScrollView 的尺寸。有一些方法可以弥补这一点，但 ScrollView 更大的限制是它会一次渲染所有内容。想象一下您的 Facebook 帐户一次渲染每个故事 - 它永远不会加载！

FlatList 类似于 ScrollView，但它使用延迟加载，因此只有当前在屏幕上的项目才会呈现。当然，FlatList 需要将数据传递给它。更具体地说，它需要传递一组数据。然后，FlatList 循环遍历该数组并在屏幕上渲染每个数组。如果某个项目离开屏幕，当用户滚动离开时，FlatList 会转储该项目并在下一次出现在屏幕上时重新创建它（状态丢失）。另一方面，ScrollView 不会转储和重新加载，而是在开始时一次性渲染它们。

以下是每个示例：

<SafeAreaView style={{ flex: 1 }}>
  <ScrollView>// content in here to fill the page</ScrollView>
</SafeAreaView>

<SafeAreaView style={{ flex: 1 }}>
  <FlatList
    data={dataArray}
    renderItem={(
      { item } // item would represent one element in the dataArray
    ) => <IndividualComponent prop={item.prop} />}
    keyExtractor={item => item.id}
  />
</SafeAreView>

现在，您永远都不想将 FlatList 嵌套在 ScrollView 中，反之亦然。这不是一个好的做法，无论如何它会给你一个错误。使用 FlatList 时要记住的重要一点是，renderItem 属性被固定为在其函数中采用以下参数：renderItem={({item, index, separators}) => {}}。此外，该项目始终来自您传递给 data 道具的数组 - 它只能接受普通数组。

关于 FlatList 的其他一些重要事情 - keyExtractor 负责 React 需要在每个元素上设置唯一键，就像在 FlatList 呈现的每个组件上设置 key 属性一样。此外，如果 dataArray 由于状态或其他道具而更新，则 FlatList 不会像上面示例中设置的那样重新渲染。为了让它更新，你可以设置 extraData 属性来观察什么会更新（例如 extraData={this.state}）。

包起来

React Native 的基本组件到此结束。如您所见，它们比您可能习惯的要特殊得多。有关此处组件的更多信息，请查看官方文档。