My Little World

react Native 基础知识

发表于

常用标签

Text:用来显示文本
View:相当于div或者span这样的容器，常用作其他组件的容器，来帮助控制布局和样式
Image:显示图片，属性source指定图片地址，也可以使用style属性控制尺寸

知识点

props:子组件通过this.props拿到父组件使用子组件时传递进来的属性值
state:自定义组件控制内部逻辑的变量，同react的state,在constructor里面初始化
StyleSheet:使用StyleSheet.create()创建样式，相当于style标签,不过使用时在style中使用

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
26
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

export default class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigBlue}>just bigBlue</Text>
        <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
        <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

在style属性中可以直接写驼峰式CSS属性进行样式调整
但设置width和height是不带单位的，React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

Text

相当于span,但可以被’\n’换行
用作子元素时，
如果父元素为Text时，多个Text子元素尽可能放一行，一行装不下时，自动换行，子元素Text标签会继承父元素Text一部分样式
如果父元素为View时，每个Text子元素成为flex布局的一个块，当容器不够宽时，每个块自动换行，块与块之间不影响
必须把文本放在Text组件中，不能直接放在View中

属性

selectable:是否可以长按选择文本，以便复制和粘贴
selectionColor[Andorid]：选中时高亮颜色
suppressHighlighting[IOS]：设为true时，当文本被按下会没有任何视觉效果。默认情况下，文本被按下时会有一个灰色的、椭圆形的高光
ellipsizeMode:表示当 Text 组件无法全部显示需要显示的字符串时如何用省略号进行修饰
————head ： 从文本内容头部截取显示省略号。例如： “…efg”
————middle ： 在文本内容中间截取显示省略号。例如： “ab…yz”
————tail ： 从文本内容尾部截取显示省略号。例如： “abcd…”
————clip ： 不显示省略号，直接从尾部截断。
numberOfLines:文本过长时，最多折叠多少行，执行ellipsizeMode设置的效果
onLayout：加载时或者布局变化以后调用，参数为：{nativeEvent: {layout: {x, y, width, height}}}
onLongPress：当文本被长按以后调用此回调函数
onPress：当文本被点击以后调用此回调函数。
llowFontScaling：制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为true。

TextInput

有些属性仅在multiline为true或者为false的时候有效，例如当multiline=false时，为元素的某一个边添加边框样式（例如：borderBottomColor，borderLeftWidth等）将不会生效
在安卓上长按选择文本会导致windowSoftInputMode设置变为adjustResize，这样可能导致绝对定位的元素被键盘给顶起来。要解决这一问题你需要在AndroidManifest.xml中明确指定合适的windowSoftInputMode( https://developer.android.com/guide/topics/manifest/activity-element.html )值，或是自己监听事件来处理布局变化。

属性

placeholder：同input
maxLength:限制文本框中最多的字符数。使用这个属性而不用JS逻辑去实现，可以避免闪烁的现象。
multiline:如果为true，文本框中可以输入多行文字。默认值为false。注意安卓上如果设置multiline = {true}，文本默认会垂直居中，可设置textAlignVertical: ‘top’样式来使其居顶显示
numberOfLines:设置输入框的行数
allowFontScaling:控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为true。
autoCapitalize:控制TextInput是否要自动将特定字符切换为大写
————characters: 所有的字符。
————words: 每个单词的第一个字符。
————sentences: 每句话的第一个字符（默认）。
————none: 不切换。
autoCorrect：如果为false，会关闭拼写自动修正。默认值是true
autoFocus：如果为true，在componentDidMount后会获得焦点。默认值为false。
blurOnSubmit：如果为true，文本框会在提交的时候失焦。对于单行输入框默认值为true，多行则为false。注意：对于多行输入框来说，如果将blurOnSubmit设为true，则在按下回车键时就会失去焦点同时触发onSubmitEditing事件，而不会换行。
caretHidden：如果为true，则隐藏光标。默认值为false。
clearButtonMode：是否要在文本框右侧显示“清除”按钮。仅在单行模式下可用。默认值为never。
clearTextOnFocus：如果为true，每次开始输入的时候都会清除文本框的内容。
defaultValue：
提供一个文本框中的初始值。当用户开始输入的时候，值就可以改变。在一些简单的使用情形下，如果你不想用监听消息然后更新value属性的方法来保持属性和状态同步的时候，就可以用defaultValue来代替。
editable：如果为false，文本框是不可编辑的。默认值为true
enablesReturnKeyAutomatically：如果为true，键盘会在文本框内没有文字的时候禁用确认按钮。默认值为false。
inlineImageLeft：指定一个图片放置在左侧。图片必须放置在/android/app/src/main/res/drawable目录下，经过编译后按如下形式引用（无路径无后缀）

1
2
3
<TextInput
 inlineImageLeft='search_icon'
/>

inlineImagePadding:给放置在左侧的图片设置padding样式。
keyboardAppearance:指定键盘的颜色。
keyboardType:决定弹出何种软键盘类型

响应

onBlur：当文本框失去焦点的时候调用此回调函数。
onChange：当文本框内容变化时调用此回调函数。回调参数为{ nativeEvent: { eventCount, target, text} }
onChangeText：当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。
onEndEditing：当文本输入结束后调用此回调函数。
onKeyPress：当一个键被按下的时候调用此回调。传递给回调函数的参数为{ nativeEvent: { key: keyValue } }，其中keyValue即为被按下的键。会在onChange之前调用。注意：在Android上只有软键盘会触发此事件，物理键盘不会触发。
onSubmitEditing：此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数。如果multiline={true}，此属性不可用。

Button

样式单一，可能不适合统一UI样式

属性

title:按钮名
color：文本的颜色(iOS)，或是按钮的背景色(Android)
disabled：禁用

响应

onPress:点击触发

TouchableHighlight

用来封装可以点击的元素，来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。
使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得视图变暗或变亮
只支持一个子节点（不能没有子节点也不能多于一个）。如果你希望包含多个子组件，可以用一个View来包装它们

属性

activeOpacity：指定封装的视图在被触摸操作激活时以多少不透明度显示（0到1之间，默认值为0.85）。需要设置underlayColor。
underlayColor：有触摸操作时显示出来的底层的颜色。

响应

onHideUnderlay：底层的颜色被隐藏的时候调用。
onShowUnderlay：当底层的颜色被显示的时候调用。

TouchableNativeFeedback

用来封装可以点击的元素，在用户手指按下时形成类似墨水涟漪的视觉效果
它只支持一个单独的View实例作为子节点

属性

background：决定在触摸反馈的时候显示什么类型的背景,它接受一个有着type属性和一些基于type属性的额外数据的对象。
一般用本组件的几个静态方法来创建这个对象
——————SelectableBackground()：创建一个对象，表示安卓主题默认的对于被选中对象的背景
——————SelectableBackgroundBorderless()：创建一个对象，表示安卓主题默认的对于被选中的无边框对象的背景
——————Ripple(color: string, borderless: boolean)：创建一个对象，当按钮被按下时产生一个涟漪状的背景，你可以通过color参数来指定颜色，如果参数borderless是true，那么涟漪还会渲染到视图的范围之外

ScrollView

一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的,适合用来显示数量不多的滚动元素

属性

horizontal：为true时，元素水平排列，默认false，垂直排列
scrollsToTop：当此值为true时，点击状态栏的时候视图会滚动到顶部。默认值为true
indicatorStyle：设置滚动条的样式。默认default 同black,’white’白色滚动条
overScrollMode：覆盖默认的overScroll模式
——————‘auto’ ： 默认值，允许用户在内容超出视图高度之后可以滚动视图。
——————‘always’ ： 无论内容尺寸，用户始终可以滚动视图。
——————‘never’ ： 始终不允许用户滚动视图。
stickyHeaderIndices：一个子视图下标的数组，用于决定哪些成员会在滚动之后固定在屏幕顶端。举个例子，传递stickyHeaderIndices={[0]}会让第一个成员固定在滚动视图顶端。这个属性不能和horizontal={true}一起使用。
scrollEnabled：当值为false的时候，内容不能滚动，默认值为true。注意即便禁止用户滚动，你也仍然可以调用scrollTo来滚动。
showsHorizontalScrollIndicator：为true的时候，显示一个水平方向的滚动条。
showsVerticalScrollIndicator：为true的时候，显示一个垂直方向的滚动条
refreshControl：用于为ScrollView提供下拉刷新功能。只能用于垂直视图，即horizontal不能为true。
pagingEnabled：当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为false。注意：垂直分页在Android上不支持。

响应

onScrollBeginDrag：当用户开始拖动此视图时调用此函数
onScrollEndDrag：当用户停止拖动此视图时调用此函数。
onScroll：在滚动的过程中，每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制。
onMomentumScrollBegin:滚动动画开始时调用此函数。
onMomentumScrollEnd：滚动动画结束时调用此函数
scrollTo(([y]: number),([x]: number),([animated]: boolean),([duration]: number))：滚到指定位置时
scrollToEnd(([options]: {animated: boolean, duration: number}));滚到视图底部

FlatList

用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同
更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。

属性

data：数据源
renderItem：返回重复的子组件
ItemSeparatorComponent：行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后。值是一个组件
ListEmptyComponent：列表为空时渲染该组件。
ListHeaderComponent：头部组件
ListFooterComponent：尾部组件。
horizontal：设置为 true 则变为水平布局模式

extraData：如果有除data以外的数据用在列表中（不论是用在renderItem还是头部或者尾部组件中），请在此属性中指定。同时此数据在修改时也需要先修改其引用地址（比如先复制到一个新的 Object 或者数组中），然后再修改其值，否则界面很可能不会刷新。

initialNumToRender：指定一开始渲染的元素数量，最好刚刚够填满一个屏幕，这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载，这样是为了保证用户执行返回顶部的操作时，不需要重新渲染首批元素

initialScrollIndex:开始时屏幕顶端的元素是列表中的第 initialScrollIndex个元素, 而不是第一个元素。如果设置了这个属性，则第一批initialNumToRender范围内的元素不会再保留在内存里，而是直接立刻渲染位于 initialScrollIndex 位置的元素。需要先设置 getItemLayout 属性。

keyExtractor:此函数用于为给定的 item 生成一个不重复的 key。Key 的作用是使 React 能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。若不指定此函数，则默认抽取item.key作为 key 值。若item.key也不存在，则使用数组下标。

onEndReachedThreshold：决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位
refreshing：在等待加载新数据时将此属性设为 true，列表就会显示出一个正在加载的符号

响应

onEndReached：当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用
onRefresh：如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性
onViewableItemsChanged：在可见行元素变化时调用。可见范围和变化频率等参数的配置请设置viewabilityConfig属性
scrollToOffset()：滚动列表到指定的偏移（以像素为单位），等同于ScrollView的scrollTo方法。

SectionList

要渲染的是一组需要分组的数据，也许还带有分组标签的数据
文档

Platform

Platform是一个模块，不是组件，用来进行平台检测
Platform.OS，在 iOS 上会返回ios，而在 Android 设备或模拟器上则会返回android。
Platform.select({ios:{},android:{}}) 可以以 Platform.OS 为 key，从传入的对象中返回对应平台的值
Platform.Version, Android 的 api level，值为数字，ios上为一个表示当前系统版本的字符串
当不同平台的代码逻辑较为复杂时，最好是放到不同的文件里，这时候我们可以使用特定平台扩展名。React Native 会检测某个文件是否具有.ios.或是.android.的扩展名，然后根据当前运行的平台自动加载正确对应的文件。
比如你可以在项目中创建下面这样的组件：

1
2
BigButton.ios.js
BigButton.android.js

然后去掉平台扩展名直接引用：

1
import BigButton from './BigButton';

Image

用于管理 iOS 和 Android 应用中的图片
图片文件的查找会和 JS 模块的查找方式一样,如果有my-icon.ios.png和my-icon.android.png，Packager 就会根据平台而选择不同的文件
可以使用@2x，@3x这样的文件名后缀，来为不同的屏幕精度提供图片，Packager 会打包所有的图片并且依据屏幕精度提供对应的资源，如果没有图片恰好满足屏幕分辨率，则会自动选中最接近的一个图片。
为了使新的图片资源机制正常工作，require 中的图片名字必须是一个静态字符串（不能使用变量！因为 require 是在编译时期执行，而非运行时期执行！）

1
2
3
4
5
6
7
8
9
10
11
12
13
// 正确
<Image source={require('./my-icon.png')} />;

// 错误
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// 正确
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />;
//通过这种方式引用的图片资源包含图片的尺寸（宽度，高度）信息，如果需要动态缩放图片（例如，通过 flex），可能必须手动在 style 属性设置{ width: null, height: null }。

require语法也可以用来静态地加载你项目中的声音、视频或者文档文件,包括.mp3, .wav, .mp4, .mov, .htm 和 .pdf等
注意的是视频必须指定尺寸而不能使用flex样式

要在 App 中显示的图片并不能在编译的时候获得，又或者有时候需要动态载入来减少打包后的二进制文件的大小。这些时候，与静态资源不同的是,需要手动指定图片的尺寸

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
26
27
28
29
// 正确
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
       style={{width: 400, height: 400}} />
//或者 指定请求参数
<Image
  source={{
    uri: 'https://facebook.github.io/react/logo-og.png',
    method: 'POST',
    headers: {
      Pragma: 'no-cache',
    },
    body: 'Your Body goes here',
  }}
  style={{width: 400, height: 400}}
/>
//或者 引用base64
<Image
  style={{
    width: 51,
    height: 51,
    resizeMode: 'contain',
  }}
  source={{
    uri:
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
  }}
/>
// 错误
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}} />

读取本地静态图片（使用require(‘./my-icon.png’)语法）则无需指定尺寸，因为它们的尺寸在加载时就可以立刻知道。

ImageBackground

用于设置背景图，把需要背景图的子组件嵌入其中即可，需要设置大小

react-navigation

导航器，控制跳转
资料

InteractionManager

确保在执行繁重工作之前所有的交互和动画都已经处理完毕。

1
2
3
4
5
6
7
8
9
InteractionManager.runAfterInteractions(() => {
  // ...需要长时间同步执行的任务...
});
//允许应用注册动画，在动画开始时创建一个交互“句柄”，然后在结束的时候清除它
var handle = InteractionManager.createInteractionHandle();
// 执行动画... (`runAfterInteractions`中的任务现在开始排队等候)
// 在动画完成之后
InteractionManager.clearInteractionHandle(handle);
// 在所有句柄都清除之后，现在开始依序执行队列中的任务

requestAnimationFrame(): 用来执行在一段时间内控制视图动画的代码
setImmediate/setTimeout/setInterval(): 在稍后执行代码。注意这有可能会延迟当前正在进行的动画。
runAfterInteractions(): 在稍后执行代码，不会延迟当前进行的动画。