基础组件

Posted 2020-10-30 苍青浪

1.TextInput

允许用户输入文本的基础组件.

属性

onChangeText 接受一个函数，而此函数会在文本变化时被调用。

onSubmitEditing 在文本被提交后（用户按下软键盘上的提交键）调用
 

实例：

 

 

1 2 3 4 5 6 7 8

<TextInput          style={{height: 40}}          placeholder="Type here to translate!"          onChangeText={(text) => this.setState({text})}        />        <Text style={{padding: 10, fontSize: 42}}>          {this.state.text.split(‘ ‘).map((word) => word && ‘??‘).join(‘ ‘)}        </Text>

 

 

2.ScrollView

通用的可滚动的容器.可以垂直滚动，也可以水平滚动。（通过horizontal属性来设置）

ScrollView适合用来显示数量不多的滚动元素。放置在ScollView中的所有组件都会被渲染.

 

实例：

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<ScrollView>           <Text style={{fontSize:96}}>Scroll me plz</Text>           <Image source={require(‘./img/favicon.png‘)} />           <Image source={require(‘./img/favicon.png‘)} />           <Image source={require(‘./img/favicon.png‘)} />           <Image source={require(‘./img/favicon.png‘)} />           <Image source={require(‘./img/favicon.png‘)} />           <Text style={{fontSize:96}}>If you like</Text>           <Image source={require(‘./img/favicon.png‘)} />           <Image source={require(‘./img/favicon.png‘)} />           <Image source={require(‘./img/favicon.png‘)} />           <Image source={require(‘./img/favicon.png‘)} />           <Image source={require(‘./img/favicon.png‘)} />           <Text style={{fontSize:96}}>Scrolling down</Text>           <Image source={require(‘./img/favicon.png‘)} />           <Image source={require(‘./img/favicon.png‘)} />         </ScrollView>

 

3.ListView

显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。

 

ListView并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。

ListView的一个常用场景就是从服务器端取回列表数据然后显示

属性

dataSource  列表的数据源      必须

renderRow  逐个解析数据源中的数据，然后返回一个设定好格式的组件来渲染    必须

rowHasChanged函数也是ListView的必需属性。  必须

实例

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

import React, { Component } from ‘react‘; import { AppRegistry, ListView, Text, View } from ‘react-native‘;   class ListViewBasics extends Component {   // 初始化模拟数据   constructor(props) {     super(props);     const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});     this.state = {       dataSource: ds.cloneWithRows([         ‘John‘, ‘Joel‘, ‘James‘, ‘Jimmy‘, ‘Jackson‘, ‘Jillian‘, ‘Julie‘, ‘Devin‘       ])     };   }   render() {     return (       <View style={{paddingTop: 22}}>         <ListView           dataSource={this.state.dataSource}           renderRow={(rowData) => <Text>{rowData}</Text>}         />       </View>     );   } }

3.Image

用于显示多种不同类型图片的React组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等.

常用属性

 

onLayout  function 

 

当元素挂载或者布局改变的时候调用，参数为：{nativeEvent: {layout: {x, y, width, height}}}.

onLoad function 

加载成功完成时调用此回调函数。

onLoadEnd function 

加载结束后，不论成功还是失败，调用此回调函数。

onLoadStart function 

加载开始时调用。

resizeMode enum(‘cover‘, ‘contain‘, ‘stretch‘) 

决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。

• cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。

• contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白

• stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。

source {uri: string}, number 

uri是一个表示图片的资源标识的字符串，它可以是一个http地址或是一个本地文件路径（使用require(相对路径)来引用）

此处需要注意如果是网络图片或者原生图片，必须指定图片大大小，否则不会渲染出结果！！

style 

tintColor color

为所有非透明的像素指定一个颜色；

其它和css类似。

(ios)accessibilityLabel string 

当用户与图片交互时，读屏器（无障碍功能）会朗读的文字。

(ios)accessible bool 

当此属性为真的时候，表示这个图片是一个启用了无障碍功能的元素。

 

(ios)defaultSource {uri: string} 

 

一个静态图片，当最终的图片正在下载的过程中时显示（loading背景图）。

(ios)onProgress function 

在加载过程中不断调用，参数为{nativeEvent: {loaded, total}}

方法

static getSize(uri: string, success: (width: number, height: number) => void, failure: (error: any) => void) 

在显示图片前获取图片的宽高(以像素为单位)。如果图片地址不正确或下载失败,此方法也会失败。

要获取图片的尺寸,首先需要加载或下载图片(同时会被缓存起来)。这意味着理论上你可以用这个方法来预加载图片,虽然此方法并没有针对这一用法进行优化,而且将来可能会换一些实现方案使得并不需要完整下载图片即可获取尺寸。所以更好的预加载方案是使用下面那个专门的预加载方法。

static prefetch(url: string) 

预加载一个远程图片(将其下载到本地磁盘缓存)。

4.TouchableWithoutFeedback

由于这个组件在被按下时没有任何视觉反馈，一般情况下不建议使用。

 

注意：TouchableWithoutFeedback只支持一个子节点

如果你希望包含多个子组件，用一个View来包装它们。

属性

这一部分比较重要，因为以Touchable开头的按钮都是在此组件的基础上实现的

delayLongPress number 

单位是毫秒，从onPressIn开始，到onLongPress被调用的延迟。

delayPressIn number 

单位是毫秒，从触摸操作开始到onPressIn被调用的延迟。

delayPressOut number 

单位是毫秒，从触摸操作结束开始到onPressOut被调用的延迟。

disabled bool 

如果设为true，则禁止此组件的一切交互。

hitSlop {top: number, left: number, bottom: number, right: number} 

这一属性定义了按钮的外延范围。这一范围也会使pressRetentionOffset（见下文）变得更大。 注意：触摸范围不会超过父视图的边界，也不会影响原先和本组件层叠的视图（保留原先的触摸优先级）。

onLayout function 

当加载或者布局改变的时候被调用，参数为：

{nativeEvent: {layout: {x, y, width, height}}}

onLongPress function 

长按触发

onPress function 

当触摸操作结束时调用，但如果被取消了则不调用（譬如响应者被一个滚动操作取代）

onPressIn function 

 

onPressOut function 

 

pressRetentionOffset {top: number, left: number, bottom: number, right: number} 

在当前视图不能滚动的前提下指定这个属性，可以决定当手指移开多远距离之后，会不再激活按钮。

但如果手指再次移回范围内，按钮会被再次激活。只要视图不能滚动，你可以来回多次这样的操作。确保你传入一个常量来减少内存分配。

5.TouchableHighlight

本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得视图变暗或变亮。

 

注意：TouchableHighlight只支持一个子节点

如果你需要包含多个子组件，可以用一个View来包装。

属性

TouchableWithoutFeedback props... 

本组件继承了所有TouchableWithoutFeedback的属性。

activeOpacity number 

指定封装的视图在被触摸操作激活时以多少不透明度显示（通常在0到1之间）。

onHideUnderlay function 

当底层的颜色被隐藏的时候调用。

onShowUnderlay function 

当底层的颜色被显示的时候调用。

style 

css

underlayColor string 

有触摸操作时显示出来的底层的颜色。

 

6.TouchableOpacity

本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低。

属性

TouchableWithoutFeedback props... 

本组件继承了所有TouchableWithoutFeedback的属性。

activeOpacity number 

指定封装的视图在被触摸操作激活时以多少不透明度显示（通常在0到1之间）。

7.TouchableNativeFeedback

本组件用于封装视图，使其可以正确响应触摸操作（仅限android平台）。在Android设备上，这个组件利用原生状态来渲染触摸的反馈。

按下时显示水波纹的效果。

目前它只支持一个单独的View实例作为子节点。在底层实现上，实际会创建一个新的RCTView结点替换当前的子View，并附带一些额外的属性。

原生触摸操作反馈的背景可以使用background属性来自定义。

属性

TouchableWithoutFeedback props... 

本组件继承了所有TouchableWithoutFeedback的属性。

background backgroundPropType 

决定在触摸反馈的时候显示什么类型的背景。它接受一个有着type属性和一些基于type属性的额外数据的对象。推荐使用以下的静态方法之一来创建这个对象：

1) TouchableNativeFeedback.SelectableBackground() - 会创建一个对象，表示安卓主题默认的对于被选中对象的背景。(?android:attr/selectableItemBackground)

2) TouchableNativeFeedback.SelectableBackgroundBorderless() - 会创建一个对象，表示安卓主题默认的对于被选中的无边框对象的背景。(?android:attr/selectableItemBackgroundBorderless)。只在Android API level 21+适用。

3) TouchableNativeFeedback.Ripple(color, borderless) - 会创建一个对象，当按钮被按下时产生一个涟漪状的背景，你可以通过color参数来指定颜色，如果参数borderless是true，那么涟漪还会渲染到视图的范围之外。（参见原生的actionbar buttons作为该效果的一个例子）。这个背景类型只在Android API level 21+适用。