学习 React Native 的基本组件

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

以下是 React Native 页面的基本设置:

 1import React from "react";
 2import { View, Text } from "react-native";
 3
 4export default class App extends React.Component {
 5  render() {
 6    return (
 7      <View>
 8        <Text> Hello World! </Text>
 9      </View>
10    );
11  }
12}

虽然View与div元素相似,但你不能将任何文本嵌入其中,比如<View>这个文本不起作用(无论如何你不应该使用div元素)这会造成例外,这就是为什么我们使用<Text>元素。

谈到<文本>组件,你可以这样包装其中的另一个组件:

1<Text style={{ color: red }}>
2  <Text style={{ fontSize: 24 }}>Here is the first text </Text>
3  <Text style={{ fontSize: 14 }}>And the second text.</Text>
4</Text>
5
6// comes out as 'Here is the first text And the second text'

当<文本>包装<文本>时,嵌入的文本会出现在同一行上,假定有足够的空间,但是,如果两个<文本>组件被包装在一个<视图>,它们会出现在不同的行上。

文本入口

这个组件有点像一个<input>的HTML元素,但如其名称所示,它仅用于文本输入。而不是使用onChange调用,您可以使用onChangeText来检测<TextInput>组件中的文本变化。

您可以通过键盘Type设置手机上的键盘(如键盘Type=电子邮件地址),切换自动更正功能,设置textContentType`为手机自动填写文本(如您的密钥链上的密码),等等。

按钮和警报

该<Button />组件是我注意到的第一个组件,与其姐妹(HTML<button>元素)有重大差异。React Native<Button />有一个onPress()支撑,而不是任何与点击相关的支撑。

最后一点是相当大的区别. 现在你可以(并且会)将其包装在View中,并用那种包装器格式化。 这是处理React Native组件的一些局限性的常见方法,你可能会发现自己使用View不断包装其他组件。

我还发现这个基本的按钮组件有趣的是,在iOS平台上,它只出现在标题中的文本中 - 没有背景,因此,颜色支持只会改变文本的颜色,尽管在Android上它会改变按钮的背景颜色。

以下是按钮组件的快速示例。

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

注意:我们正在使用警告,这也是从 React Native 内核中导入的。

图片与背景

<Image />组件与HTMLimg标签非常相似,但存在一些差异,例如将src标签更改为source。此外,源本身也运作不同:对于本地图像,您将其导入require,例如这个<Image source={require('path/to/local/image)} />。

此外,在源代码中,您可以使用 URI 如下: <Image source={uri: 'https://imagesite.com/path/to/image'}} style={{height: 100, width: 100, resizeMode: contain}}. 注意 uri 是一个对象,所以它需要另一套弯曲的子,就像内线风格一样。 这里有很多其他子可以检查,但一个常见的使用是 resizeMode)。 这决定了如何调整图像的大小,并将您的图像放入一个家长 View 组件中。

该ImageBackground组件与ImageBackground组件类似,因为它收到相同的补贴,但这里的主要区别是,它可以有儿童元素。 该ImageBackground组件是自我关闭的。

触摸者

在 React Native 中,你会注意到的一件事是,我们所涵盖的许多组件没有你通常在 Web 应用程序中实现的所有特性,而<Image />组件没有onPress特性,而<Button />组件没有style特性。

例如,您可以将任何图像组件包装到触摸式:

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

上面的示例中的TouchableHighlight就像是按下函数(包括内置动画)的图像容器,您也可以在触摸元件中添加View和Text组件,以便像<Button />一样,但具有可自定义的风格。

现在有几种不同的触摸元件,如:

• TouchableHighlight:在按下时,会使背景变暗
• TouchableOpacity:在按下时,会使按钮不透明
• TouchableNativeFeedback:仅限Android的 ripple 效果
• TouchableWithoutFeedback:没有任何反馈/效果的打印

这些动画发生在按下时. 可触摸的组件也有自己的独特附件,您可以根据自己的喜好定制。

ScrollView、SafeAreaView 和 FlatList

到目前为止,我们已经查看了React Native应用程序的所有基本构建元件,然而,还有更多,你会很快发现的一点是,如果内容的高度或宽度超过屏幕大小,电话屏幕不会自动滚动。

ScrollView组件是启用滚动的基本组件,但是,FlatList还允许滚动,但它比ScrollView具有更大的容量。

现在,ScrollView的基本设置是给可滚动视图的界限,这很可能会是屏幕的高度和宽度。像图像一样,你可以包装ScrollView来给它这些界限。通常,你可以使用一个正常的View组件来做到这一点,但如果你有iPhone X,你可能会发现你的View在圆形角落或传感器集群后面上升。SafeAreaView将照顾这一点,为整个屏幕提供足够的垫子。

这种与ScrollView的设置将工作,当你所有的元素的高度被确定在本地 - 作为在,你的页面的高度将始终是相同的设置。如果有数据来影响内容的尺寸,它可能很难确定ScrollView的尺寸。有方法来弥补这一点,但一个更大的限制ScrollView是它会一次性地完成一切。想象你的Facebook帐户一次性地渲染每一个故事 - 它永远不会加载!

FlatList类似于ScrollView,但它使用懒惰的加载,所以只有当前在屏幕上的项目才会进行渲染。当然,FlatList需要传输数据。更具体地说,它需要传输一系列数据。然后,FlatList在屏幕上显示每个项目,如果一个项目离开屏幕,当用户滚动时,FlatList将该项目抛弃并在屏幕上下一次出现时重现。

以下是每一个例子:

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

1<SafeAreaView style={{ flex: 1 }}>
2  <FlatList
3    data={dataArray}
4    renderItem={(
5      { item } // item would represent one element in the dataArray
6    ) => <IndividualComponent prop={item.prop} />}
7    keyExtractor={item => item.id}
8  />
9</SafeAreView>

现在,你永远不会想把‘FlatList’嵌入一个‘ScrollView’或反之亦然。这不是一个好做法,它会给你一个错误,无论如何。要记住在FlatList中,重要的是‘renderItem’ prop是固定在其功能中采取这些参数: renderItem={({项目,索引,分离器}) => {}}。 此外,项目总是从你传入‘数据’ prop的数组 - 它只能在一个简单的数组中。

关于 FlatList 的其他一些重要的事情 - keyExtractor 处理 React 需要在每个元素上设置一个独特的密钥,就像在 FlatList 渲染的每个组件上设置一个 `key' 接口一样。

包装上

這結束了React Native的基本組成部分,正如你所看到的,這些組成部分比你可能習慣的要特別得多。