RN47 一些学习

最新推荐文章于 2020-07-15 20:59:15 发布

大白熊_BlankBear

最新推荐文章于 2020-07-15 20:59:15 发布

阅读量544

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_34823218/article/details/106864981

前端专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了React Native中的FlexBox布局，包括各种属性的使用，如order、flex-grow、flex-shrink等，并展示了从1到9个点的骰子布局实现。此外，还涵盖了组件如View、Text、Image、TextInput的使用，以及如何处理触摸事件、导航器的导入和使用方法。同时，提到了网络请求、本地持久化存储和组件间的通信机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

入口

Import React,{ Component } from ‘react’; //加载

Import {AppRegistry,Text， StyleSheet ,View } from ‘react-native ‘; //加载组件 AppRegistry为JS中RN入口

一样式

（一）StyleSheet

class Lot extends Component {
    render(){
               return (
               <View>
                <Text style={styles.red}>red</Text>
                <Text style={styles.bigblue}>big blue</Text>
                </View>
               )
    }
}

const styles = StyleSheet.create({
    bigblue:{
        color:'blue',
        fontWeight: 'bold',
        fontSize: 30,

    },
    red: {
    color:'red',
    },

    }
);

（二）FlexBox

flexDirection

决定主轴的方向,主轴 column列 column-reverse 从底向上row行 row-reverse从右向左

FlexWrap

换行 nowrap（默认）：不换行。（2）wrap：换行，第一行在上方（3）wrap-reverse：换行，第一行在下方。

alignItems

次轴flex-start、center、flex-end以及stretch拉伸

justifyContent

主轴排列方式 flex-start行首开始排列、center、flex-end行尾、space-around均匀分布第一个元素到行首的元（最后到行尾）距离为元素间的一半space-between 每行均匀

align-items

项目在交叉轴上如何对齐。

align-content

多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {

order: <integer>;}

flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {

flex-grow: <number>; /* default 0 */}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {

flex-shrink: <number>; /* default 1 */}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {

flex-basis: <length> | auto; /* default auto */}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {

align-self: auto | flex-start | flex-end | center | baseline | stretch;}

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

1、骰子的布局

骰子的一面，最多可以放置9个点。

下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。

如果不加说明，本节的HTML模板一律如下。

上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。

1.1 单项目

首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。

.box {

display: flex;}

设置项目的对齐方式，就能实现居中对齐和右对齐。

.box {

display: flex;

justify-content: center;}

.box {

display: flex;

justify-content: flex-end;}

设置交叉轴对齐方式，可以垂直移动主轴。

.box {

display: flex;

align-items: center;}

.box {

display: flex;

justify-content: center;

align-items: center;}

.box {

display: flex;

justify-content: center;

align-items: flex-end;}

.box {

display: flex;

justify-content: flex-end;

align-items: flex-end;}

1.2 双项目

.box {

display: flex;

justify-content: space-between;}

.box {

display: flex;

flex-direction: column;

justify-content: space-between;}

.box {

display: flex;

flex-direction: column;

justify-content: space-between;

align-items: center;}

.box {

display: flex;

flex-direction: column;

justify-content: space-between;

align-items: flex-end;}

.box {

display: flex;}

.item:nth-child(2) {

align-self: center;}

.box {

display: flex;

justify-content: space-between;}

.item:nth-child(2) {

align-self: flex-end;}

1.3 三项目

.box {

display: flex;}

.item:nth-child(2) {

align-self: center;}

.item:nth-child(3) {

align-self: flex-end;}

1.4 四项目

.box {

display: flex;

flex-wrap: wrap;

justify-content: flex-end;

align-content: space-between;}

HTML代码如下。

</div>

</div></div>

CSS代码如下。

.box {

display: flex;

flex-wrap: wrap;

align-content: space-between;}

.column {

flex-basis: 100%;

display: flex;

justify-content: space-between;}

1.5 六项目

.box {

display: flex;

flex-wrap: wrap;

align-content: space-between;}

.box {

display: flex;

flex-direction: column;

flex-wrap: wrap;

align-content: space-between;}

HTML代码如下。

</div>

</div>

</div></div>

CSS代码如下。

.box {

display: flex;

flex-wrap: wrap;}

.row{

flex-basis: 100%;

display:flex;}

.row:nth-child(2){

justify-content: center;}

.row:nth-child(3){

justify-content: space-between;}

1.6 九项目

.box {

display: flex;

flex-wrap: wrap;}

2、网格布局

2.1 基本网格布局

最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。

HTML代码如下。

CSS代码如下。

.Grid {

display: flex;}

.Grid-cell {

flex: 1;}

2.2 百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。

HTML代码如下。

.Grid {

display: flex;}

.Grid-cell {

flex: 1;}

.Grid-cell.u-full {

flex: 0 0 100%;}

.Grid-cell.u-1of2 {

flex: 0 0 50%;}

.Grid-cell.u-1of3 {

flex: 0 0 33.3333%;}

.Grid-cell.u-1of4 {

flex: 0 0 25%;}

3、圣杯布局

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

HTML代码如下。

</div>

CSS代码如下。

.HolyGrail {

display: flex;

min-height: 100vh;

flex-direction: column;}

header,

footer {

flex: 1;}

.HolyGrail-body {

display: flex;

flex: 1;}

.HolyGrail-content {

flex: 1;}

.HolyGrail-nav, .HolyGrail-ads {

/* 两个边栏的宽度设为12em */

flex: 0 0 12em;}

.HolyGrail-nav {

/* 导航放到最左边 */

order: -1;}

如果是小屏幕，躯干的三栏自动变为垂直叠加。

@media (max-width: 768px) {

.HolyGrail-body {

flex-direction: column;

flex: 1;

}

.HolyGrail-nav,

.HolyGrail-ads,

.HolyGrail-content {

flex: auto;

}}

4、输入框的布局

我们常常需要在输入框的前方添加提示，后方添加按钮。

HTML代码如下。

CSS代码如下。

.InputAddOn {

display: flex;}

.InputAddOn-field {

flex: 1;}

5、悬挂式布局

有时，主栏的左侧或右侧，需要添加一个图片栏。

HTML代码如下。

CSS代码如下。

.Media {

display: flex;

align-items: flex-start;}

.Media-figure {

margin-right: 1em;}

.Media-body {

flex: 1;}

6、固定的底栏

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。

HTML代码如下。

CSS代码如下。

.Site {

display: flex;

min-height: 100vh;

flex-direction: column;}

.Site-content {

flex: 1;}

7，流式布局

每行的项目数固定，会自动分行。

CSS的写法。

.parent {

width: 200px;

height: 150px;

display: flex;

flex-flow: row wrap;

align-content: flex-start;}

.child {

box-sizing: border-box;

flex: 0 0 25%;

height: 50px;

border: 1px solid red;}

（完）

（三）View

1.属性方法

2.风格样式

在React Native中的Style风格布局，其实和CSS样式有很多相似的地方，这边介绍一下:

下面是几个特殊的属性，这边直接介绍所有平台通用以及只在Android平台有效果的属性

①.testID (全平台)

可以根据该testID在测试的时候定位该View

②:accessibilityComponentType(android平台)

定义是否该UI组件和原生组件一致化处理

③.accessibilityLiveRegion enum('none','polite','assertive') (android平台)

该当View发生更新时候的，是否需要通过用户，不过该只对Android4.4以及以上的平台设备有效果

④.collapsable (android平台)

布局合并优化使用

⑤.importantForAccessibility enum('auto', 'yes', 'no', 'no-hide-descendants') (android平台)

设置视图响应事件等级

⑥.needsOffscreenAlphaCompositing (android平台)

设置View是否需要渲染和半透明度效果处理的先后次序。

⑦.renderToHardwareTextureAndroid (android)

设置是否需要GPU进行渲染

（四）Text

1.属性方法

①.allowFontScaling (bool):控制字体是否根据iOS的设置进行自动缩放-iOS平台,Android平台不适用
②.numberOfLines (number):进行设置Text显示文本的行数，如果显示的内容超过了行数，默认其他多余的信息就不会显示了。
③.onLayout (function) 当布局位置发生变动的时候自动进行触发该方法, 其中该function的参数如下:
[code lang="" start="" highlight=""]{nativeEvent: {layout: {x, y, width, height}}}[/code]
④.onPress (fcuntion) 该方法当文本发生点击的时候调用该方法.

2.风格样式

①.继承可以使用View组件的所有Style(具体查看http://facebook.github.io/react-native/docs/view.html#style)
②.color:字体颜色
③.fontFamily 字体名称
④.fontSize  字体大小
⑤.fontStyle   字体风格(normal,italic)
⑥.fontWeight  字体粗细权重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
⑦.textShadowOffset 设置阴影效果{width: number, height: number}
⑧.textShadowRadius 阴影效果圆角

⑨.textShadowColor 阴影效果的颜色
⑩.letterSpacing 字符间距

⑪.lineHeight 行高
⑫.textAlign   文本对其方式("auto", 'left', 'right', 'center', 'justify')
⑬.textDecorationLine  横线位置 ("none", 'underline', 'line-through', 'underline line-through')
⑭.textDecorationStyle   线的风格("solid", 'double', 'dotted', 'dashed')
⑮.textDecorationColor  线的颜色       16.writingDirection  文本方向("auto", 'ltr', 'rtl')

（五）Image

1.属性方法

1.onLayout (function) 当Image布局发生改变的，会进行调用该方法，调用的代码为:

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

2.onLoad (function):当图片加载成功之后，回调该方法

3.onLoadEnd (function):当图片加载失败回调该方法，该不会管图片加载成功还是失败

4.onLoadStart (fcuntion):当图片开始加载的时候调用该方法

5.resizeMode 缩放比例,可选参数('cover', 'contain', 'stretch') 该当图片的尺寸超过布局的尺寸的时候，会根据设置Mode进行缩放或者裁剪图片

6.source {uri:string} 进行标记图片的引用，该参数可以为一个网络url地址或者一个本地的路径

2.样式风格

1.FlexBox 支持弹性盒子风格

2.Transforms 支持属性动画 3.resizeMode 设置缩放模式

4.backgroundColor 背景颜色

5.borderColor 边框颜色 6.borderWidth 边框宽度

7.borderRadius 边框圆角

8.overflow 设置图片尺寸超过容器可以设置显示或者隐藏('visible','hidden')

9.tintColor 颜色设置 10.opacity 设置不透明度0.0(透明)-1.0(完全不透明)

（六）TextInput

1.属性方法(这边讲解平台公用以及Android生效的属性方法)
1.View 支持View的相关属性
2.autoCapitalize 控制TextInput输入的字符进行切换成大写(可选择参数:'none', 'sentences', 'words', 'characters')

none:不自动切换任何字符成大写
sentences:默认每个句子的首字母变成大写
words:每个单词的首字母变成大写
characters:每个字母全部变成大写

3.autoCorrect bool  设置拼写自动修正功能默认为开启(true)
4.autoFocus bool  设置是否默认获取到焦点默认为关闭(false)。该需要componentDidMount方法被调用之后才会获取焦点哦(componentDidMount是React组件被渲染之后React主动回调的方法)
5.defaultValue string 给文本输入设置一个默认初始值。
6.editable bool  设置文本框是否可以编辑默认值为true,可以进行编辑
7.keyboardType  键盘类型(可选参数:"default", 'email-address', 'numeric', 'phone-pad', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 该用来选择默认弹出键盘的类型例如我们甚至numeric就是弹出数字键盘。鉴于平台的原因如下的值是所有平台都可以进行通用的

default
numeric 数字键盘
email-address 邮箱地址

8.maxLength number  可以限制文本输入框最大的输入字符长度
9.multiline bool  设置可以输入多行文字，默认为false(表示无论文本输入多少，都是单行显示)
10.onBlur function 监听方法，文本框失去焦点回调方法
11.onChange function 监听方法,文本框内容发生改变回调方法
12.onChangeText function监听方法，文本框内容发生改变回调方法，该方法会进行传递文本内容
13.onEndEditing function监听方法，当文本结束文本输入回调方法
14.onFocus function 监听方法  文本框获取到焦点回调方法
15.onLayout function监听方法  组价布局发生变化的时候调用，调用方法参数为 {x,y,width,height}
16.onSubmitEditing function监听方法，当编辑提交的时候回调方法。不过如果multiline={true}的时候，该属性就不生效
17.placeholder string 当文本输入框还没有任何输入的时候，默认显示信息，当有输入的时候该值会被清除
18.placeholderText Color string 设置默认信息颜色(placeholder)
19.secureTextEntry bool 设置是否为密码安全输入框，默认为false
20.style 风格属性  可以参考Text组件风格
21.value string 输入框中的内容值
以上是一些Android，iOS平台通用的属性，下面根据官网的文档，我这边组要讲解一下适用于Android平台的属性方法
22.numberOfLines number设置文本输入框行数，该需要首先设置multiline为true,设置TextInput为多行文本。
23.textAlign 设置文本横向布局方式可选参数('start', 'center', 'end')
24.textAlignVertical 设置文本垂直方向布局方式可选参数('top', 'center', 'bottom')
25.underlineColorAndroid  设置文本输入框下划线的颜色

（七）ProgressBarAndroid

属性方法

1.支持View控件的属性方法 (这些属性是从View控件中继承下来) 例如:大小,布局,边距啊

2.color 设置进度的颜色属性值

3.indeterminate 设置是否要显示一个默认的进度信息，该如果styleAttr的风格设置成Horizontal的时候该值必须设置成false

4.progress number 设置当前的加载进度值(该值在0-1之间)

5.styleAttr 进度条框的风格，可以取的值如下:

Horizontal
Small
Large
Inverse
SmallInverse
LargeInverse

（八）Navigator

Navigator.SceneConfigs.PushFromRight (默认)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump

（九）ScrollView

属性方法

1.View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)

2.contentContainerStyle 样式风格属性(传入StyleSheet创建的Style文件)。该样式会作用于被ScrollView包裹的所有的子视图。

3.horizontal 表示ScrollView是横向滑动还是纵向滑动。该默认为false表示纵向滑动

4.keyboardDismissMode 枚举类型表示键盘隐藏类型，可选值('none', "interactive", 'on-drag') 三个值的意义分别如下:

none 默认值，表示在进行拖拽滑动的时候不隐藏键盘
on-drag 表示在进行拖拽滑动开始的时候隐藏键盘
interactive 表示当拖拽触摸移动的同时隐藏键盘，向上拖拽的时候取消隐藏。不过在Android平台上面该选项不支持，所以会和'none'一样的效果。

5.keyboardShouldPersistTaps 该属性默认为false，表示如果当前是textinput控件，并且键盘是弹出状态的话，点击textinput之外地方，会进行隐藏键盘。反之不会有效果，键盘还是成打开状态。

6.onContentSizeChange function 该当滚动视图的内容尺寸大小发生变化的时候进行调用

7.onScroll function 该方法在滚动的时候每frame(帧)调用一次。该方法事件调用的频率可以使用scrollEventThrottle属性进行设置。

8.refreshControl element 设置元素控件，该可以进行指定RefreshControl组件。这样可以为ScrollView添加下拉刷新的功能.

9.removeClippedSubviews 测试属性当该值为true的时候。在ScrollView视图之外的视图(该视图的overflow属性值必须要为hidden)会从被暂时移除，该设置可以提高滚动的性能。

10.showsHorizontalScrollIndicator 该值设置是否需要显示横向滚动指示条

11.showsVerticalScrollIndicator 该值设置是否需要显示纵向滚动指示条

12.sendMomentumEvents 当ScrollView有onMomentumScrollBegin或者onMomentumScrollEnd方法设置，该sendMomentumEvents值设置为true的时候。变化的事件信息会通过该Android框架自动发送出来，然后之前设置的方法进行捕捉。

（十）ToolbarAndroid

属性方法

1.View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)

2.actions 设置功能列表信息属性传入的参数信息为: [{title: string, icon: optionalImageSource, show: enum('always', 'ifRoom', 'never'), showWithText: bool}] 进行设置功能菜单中的可用的相关功能。该会在显示在组件的右侧(显示方式为图标或者文字)，如果界面上面区域已经放不下了，该会加入到隐藏的菜单中(弹出进行显示)。该属性的值是一组对象数组，每一个对象包括以下以下一些参数:

title: 必须的，该功能的标题
icon: 功能的图标采用该代码进行获取 require('./some_icon.png')
show: 该设置图标直接显示，还是隐藏或者显示在弹出菜单中。always代表总是显示,ifRoom代表如果Bar中控件够进行显示，或者never代表使用直接不显示
showWithText boolean 进行设置图标旁边是否要显示标题信息

3.contentInSetEnd number 该用于设置ToolBar的右边和屏幕的右边缘的间距。

4.contentInsetStart number 该用于设置ToolBar的左边和屏幕的左边缘的间距。

5.logo optionalImageSource 可选图片资源用于设置Toolbar的Logo图标

6.navIcon optionalImageSource 可选图片资源用于设置导航图标

7.onActionSelected function方法当我们的功能被选中的时候回调方法。该方法只会传入唯一一个参数:点击功能在功能列表中的索引信息

8.onIconClicked function 当图标被选中的时候回调方法

9.overflowIcon optionalImageSource 可选图片资源设置功能列表中弹出菜单中的图标

10. rtl 设置toolbar中的功能顺序是从右到左(RTL:Right To Left)。为了让该效果生效，你必须在Android应用中的AndroidMainifest.xml中的application节点中添加android:supportsRtl="true"，然后在你的主Activity(例如:MainActivity)的onCreate方法中调用如下代码:setLayoutDirection(LayoutDirection.RTL)。

11.subtitle string 设置toolbar的副标题

12.subtitleColor color 设置设置toolbar的副标题颜色

13.title string 设置toolbar标题

14.titleColor color 设置toolbar的标题颜色

（十一）Switch

属性方法

View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
disabled bool 如果该值为true,用户就无法点击switch开关控件，默认为false
onValueChange function 方法，当该组件的状态值发生变化的时候回调方法
value bool 该开关的值，如果该值为true的时候，开关呈打开状态，默认为false

（十二）Picker

属性方法

View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
onValueChange function方法,当选择器item被选择的时候进行调用。该方法被调用的时候回传入一下两个参数

　　　　itemValue:该属性值为被选中的item的属性值

　　　　itemPosition:该选择器被选中的item的索引position

selectedValue: any任何参数值，选择器选中的item所对应的值，该可以是一个字符串或者一个数字
style pickerStyleType 该传入style样式，设置picker的样式风格
enabled bool 如果该值为false，picker就无法被点击选中。例如:用户无法进行做出选择
mode enum ('dialog','dropdown') 选择器模式。在Android平台上面，设置mode可以控制用户点击picker弹出的样式风格

　　　　'dialog': 该值为默认值，进行弹出一个模态dialog(弹出框)

　　　　'dropdown':以picker视图为基础，在该视图下面弹出下拉框

prompt string 设置picker的提示语(标题),在Android平台上面，模式设置成'dialog',显示弹出框的标题
View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
initialPage number ViewPagerAndroid初始索引页，不过我们可以使用setPage方法来更新页码，通过onPageSelected方法来监听页面滑动。
keyboardDismissMode enum('none','on-drag') 枚举类型，进行设置在拖拽滑动的过程中是否要显示键盘。

（十三）ViewPagerAndroid

　　　　'none' 默认值,在拖拽中不隐藏键盘

　　　　'on-drag' 当拖拽滑动开始的时候隐藏键盘

onPageScroll function 方法，该方法在页面进行滑动的时候执行(不管是因为页面滑动动画原因还是由于页面之间的拖拽以及滑动原因).该会回调传入的event.nativeEvent对象会有携带如下参数:

　　　　'position' 从左起开始第一个可见的页面的索引

　　　　'offset' 该value值的范围为[0,1)，该用来代表当前页面的却换的状态。值x代表该索引页面(1-x)的范围可见，另外x范围代表下一个页面可见的区域

onPageScrollStateChanged function 该回调方法会在页面滚动状态发生变化的时候进行调用。页面的滚动状态有下面三种情况:

　　　　'idle' 该表示当前用户和页面滚动没有任何交互

　　　　'dragging' 拖动中，该表示当前页面正在被拖拽滑动中

　　　　'settling' 该表示存在页面拖拽或者滑动的交互。页面滚动正在结束。并且正在关闭或者打开动画。

onPageSelected function 方法该在页面进行拖拽滑动切换完成之后回调。该方法回调参数中的event.nativeEvent对象会携带如下一个属性 : 'position' 该属性代表当前选中的页面的索引.

（十四）TouchableHighlight，TouchableNativeFeedback，TouchableOpacity，TouchableWithoutFeedback

属性方法

accessibilityComponentType View.AccessibilityComponentType 设置可访问的组件类型
accessibilityTraits View.AccessibilityTraits,[View.AccessibilityTraits] 设置访问特征
accessible bool 设置当前组件是否可以访问
delayLongPress number 设置延迟的时间，单位为毫秒。从onPressIn方法开始，到onLongPress被调用这一段时间
delayPressIn number 设置延迟的时间，单位为毫秒，从用户触摸控件开始到onPressIn被调用这一段时间
delayPressOut number 设置延迟的时间，单位为毫秒，从用户触摸事件释放开始到onPressOut被调用这一段时间
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} 该设置当视图滚动禁用的情况下，可以定义当手指距离组件的距离。当大于该距离该组件会失去响应。当少于该距离的时候，该组件会重新进行响应。

（十五）ListView

属性方法

ScrollView相关属性样式全部继承
dataSource ListViewDataSource 设置ListView的数据源
initialListSize number 进行设置ListView组件刚刚加载的时候渲染的列表行数，用这个属性确定首屏或者首页加载的数量，而不是花大量的时间渲染加载很多页面数据，提高性能
onChangeVisibleRows function (visibleRows,changedRows)=>void。当可见的行发生变化的时候回调该方法。visibleRows参数对所有可见的行为{selectionID:{rowId:true}}的形式，changedRow参数对已经改变可见的行为{selectionID:{rowID:true|false}}。该值true代表可见，false代表在视图之外不可见的行。
onEndReachedThreshold number 当偏移量达到设置的临界值调用onEndReached
onEndReached function 方法，当所有的数据项行被渲染之后，并且列表往下进行滚动。一直滚动到距离底部onEndReachedThredshold设置的值进行回调该方法。原生的滚动事件进行传递(通过参数的形式)。
pageSize number 每一次事件的循环渲染的行数
removeClippedSubviews bool 该属性用于提供大数据列表的滚动性能。该使用的时候需要给每一行(row)的布局添加over:'hidden'样式。该属性默认是开启状态。
renderFooter function 方法 ()=>renderable ，在每次渲染过程中头和尾总会重新进行渲染。如果发现该重新绘制的性能开销比较大的时候，可以使用StaticContainer容器或者其他合适的组件。在每一次渲染过程中Footer(尾)该会一直在列表的底部，header(头)该会一直在列表的头部
renderHeader function 方法使用情况和上面的renderFooter差不多
renderRow function 方法 (rowData,sectionID,rowID,highlightRow)=>renderable 该方法有四个参数，其中分别为数据源中一条数据，分组的ID，行的ID，以及标记是否是高亮选中的状态信息。
renderScrollComponent function 方法 (props)=>renderable 该方法可以返回一个可以滚动的组件。默认该会返回一个ScrollView
renderSectionHeader function (sectionData,sectionID)=>renderable 如果设置了该方法，这样会为每一个section渲染一个粘性的header视图。该视图粘性的效果是当刚刚被渲染开始的时候，该会处于对应的内容的顶部，然后开始滑动的时候，该会跑到屏幕的顶端。直到滑动到下一个section的header(头)视图，然后被替代为止。
renderSeparator function (sectionID,rowID,adjacentRowHighlighted)=>renderable 如果设置该方法，会在被每一行的下面渲染一个组件作为分隔。除了每一个section分组的头部视图前面的最后一行。
scrollRenderAheadDistance number 进行设置当该行进入屏幕多少像素以内之后就开始渲染该行

（十六）Cilpboard

使用范例：

async _setClipboardContent(){

Clipboard.setString('Hello World');

try {

var content = await Clipboard.getString();

ToastAndroid.show('粘贴板的内容为:'+content,ToastAndroid.SHORT);

} catch (e) {

ToastAndroid.show(e.message,ToastAndroid.SHORT);

}

（十七）DatePickerAndroid

1.Promise<Object> open(options:Object) staitc,静态方法，使用该方法进行加载弹出一个标准的Android时间日期选择器。该options(可选)参数有以下三种对象：

①:'date' 日期Date对象或者时间戳以毫秒单位-日期已默认格式显示

②:'minDate' 日期Date对象或者时间戳以毫秒单位-可以选择的最小时间

③:'maxDate' 日期Date对象或者时间戳以毫秒单位-可以选择的最大时间

options = {date: this.state.maxDate,maxDate:new Date()}

2.dateSetAction() ,static静态方法，选择时间日期选择器

3.dismissedAction(),static静态方法，关闭时间日期选择器

async showPicker(stateKey, options) {

try {

var newState = {};

const {action, year, month, day} = await DatePickerAndroid.open(options);

if (action === DatePickerAndroid.dismissedAction) {

newState[stateKey + 'Text'] = 'dismissed';

} else {

var date = new Date(year, month, day);

newState[stateKey + 'Text'] = date.toLocaleDateString();

newState[stateKey + 'Date'] = date;

}

this.setState(newState);

} catch ({code, message}) {

console.warn(`Error in example '${stateKey}': `, message);

}

（十八）FlatList

Data数据源

rendItem 从数据源中逐个解析数据，返回一个设定好的组件渲染

<FlatList

data={[{key: 'a'}, {key: 'b'}]}

renderItem={({item}) => <Text>{item.key}</Text>}

SectionList加了title 里面的Sections renderItem renderSectionHeader

二颜色

遵守CSS3的规范

三图片

require有用的是一个静态字符串而不是一个变量，在编译期间执行而不是在运行期执行

可以是静态图片和非图片资源

1.处理触摸事件

Touchable onPress属性接受一个点击事件的处理函数。当一个点击操作开始并且终止于本组件时（即在本组件上按下手指并且抬起手指时也没有移开到组件外），此函数会被调用

onLongPress 长按

TouchableOpacity 透明触摸

TppuchableHighlight 高亮触摸

TouchableWithoutFeedback 无反馈触摸

class MyButton extends Component {

  _onPressButton() {

    console.log("You tapped the button!");

  }



  render() {

    return (

      <TouchableHighlight onPress={this._onPressButton}>

        <Text>Button</Text>

      </TouchableHighlight>

    );

  }

}

2.pagingEnabled属性来让用户整屏整屏的滑动

3.maximumZoomScale和minimumZoomScale 双指缩放

四导航器

react-native-tab-navigator.

1 导入方式

在项目主目录下执行：npm install react-native-tab-navigator —save命令。但是我建议使用yarn来引入所有第三方的组件：yarn add react-native-tab-navigator。因为使用npm命令安装第三方组件的时候有时会出现问题。而且建议引入第三方组件的时候都是用yarn来操作，比较保险一点。

在确认react-native-tab-navigator组件下载到了npm文件夹以后，就可以在项目中导入使用了。

2. 使用方法

 //导入 react-native-tab-navigator 组件，取名为 TabNavigator(随意取名)

import TabNavigator from 'react-native-tab-navigator';

//每个tab对应的唯一标识，可以在外部获取

export const FLAG_TAB = {

    flag_popularTab: 'flag_popularTab',

    flag_trendingTab: 'flag_trendingTab',

    flag_favoriteTab: 'flag_favoriteTab',

    flag_myTab: 'flag_myTab'

}

export default class HomePage extends BaseComponent {

    constructor(props){

     

        super(props);

       

        let selectedTab = this.props.selectedTab?this.props.selectedTab:FLAG_TAB.flag_popularTab

        this.state = {

            selectedTab:selectedTab,

            theme:this.props.theme

        }

    }

    _renderTab(Component, selectedTab, title, renderIcon) {

        return (

             }

                renderSelectedIcon={() => }

                    onPress={() => this.onSelected(selectedTab)}>

                

            

        )

    }

    render() {

        return (

            

                

                    {this._renderTab(PopularPage, FLAG_TAB.flag_popularTab, '最热', require('../../../res/images/ic_polular.png'))}

                    {this._renderTab(TrendingPage, FLAG_TAB.flag_trendingTab, '趋势', require('../../../res/images/ic_trending.png'))}

                    {this._renderTab(FavoritePage, FLAG_TAB.flag_favoriteTab, '收藏', require('../../../res/images/ic_favorite.png'))}

                    {this._renderTab(MinePage, FLAG_TAB.flag_myTab, '我的', require('../../../res/images/ic_my.png'))}

                

            

        )

    }

}

在这里我省略了其他的代码，只保留了关于搭建TabBar && NavigationBar的代码。

这里定义的是HomePage组件，是这个Demo用来管理这些tab的组件。

因为这个Demo一共有四个tab，所以将渲染的tab的代码抽取出来作为单独的一个函数：_renderTab。该函数有四个参数：

Component：当前tab被点击后显示的组件。

selectedTab：当前tab的唯一标识。

title：当前tab的标题。

renderIcon：当前tab的图标。

在_renderTab方法里，我们返回一个TabNavigator.Item组件，除了一些关于tab的props的定义以外，我们将属于该tab的组件填充了进去：

在这里，{...this.props}是将当前HomePage的所有props赋给这个Component。还有另外两个props也定义了进去：theme和homeComponent。

这里用一个常量定义了四个tab的唯一标识，需要注意的是，这个常量是可以被其他组件获得的，以为它被export字段修饰了。

另外，还需要注意一下HomePage有一个属性是selectedTab，它用来标记当前选择的tab是哪一个。在constructor方法里做了一个判断，如果没有从外部组件传进来selectedTab，则需要初始化为FLAG_TAB.flag_popularTab。

3. 定义

APP的导航结构渲染通用元素如配置的标题栏和选项卡栏

4 步骤：

设置路由对象
渲染配置
场景渲染

InitialRoute={  rootRoute};

configureScene={(route)=> {

Return Navigator.SceneConfig.PushFromRight;

}}

renderScene





import React from 'react';

import {

View,

Navigator

} from 'react-native';

import FirstPageComponent from './FirstPageComponent';



export default class SampleComponent extends React.Component {

render() {

let defaultName = 'FirstPageComponent';

let defaultComponent = FirstPageComponent;

return (

        <Navigator

          initialRoute={{ name: defaultName, component: defaultComponent }}

          configureScene={(route) => {

            return Navigator.SceneConfigs.VerticalDownSwipeJump;

          }}

          renderScene={(route, navigator) => {

            let Component = route.component;

            return <Component {...route.params} navigator={navigator} />

          }} />

);

}

}

CreateStackNavigator （

RouteConfigs路由配置对象是从路由名称到路由配置的映射

【Screen 指定一个React组件作为屏幕的主要显示内容，当组件被createStackNavigator加载时被分配一个 navigation prop

Path 可选 schema跳转时使用

navigationOptions 可选配置全局的屏幕导航选项

】

, StackNavigatorConfig可选配导航器的路由）屏幕上方导航栏

createBottomTabNavigator 屏幕下方的标签栏

createMaterialTopTabNavigator 屏幕顶部的材料设计主题标签页

createDrawerNavigator 抽屉效果，侧边划出

CreateSwitchNavigator 一次只展示一个页面

Screen Navigator prop 屏幕导航属性 navigator 完成屏幕之间的调度操作

Screen NavigationOptions 屏幕导航选项定制显示屏幕的方式1

5. 属性props

Ref 获取Navigator

onNavigatorStateChange （prevState变化之前state， NewState新state， action导致变化的action）

ScreenProps 子屏幕传递额外的数据

Screen NAvigation Prop 屏幕被打开时收到navigation prop

6 Navigstion 作用

Navigate 跳转到其他页面

State 屏幕当前state

setParams 改变路由params

goBack 关闭当前屏幕

Dispatch 向路由发送action

addListener 订阅导航生命周期的焦点

isFocuded true表示屏幕获取了焦点

getParam 获取具有会退的特定参数

dangerouslyGetParent 返回父导航器

7 页面之前跳转

Navigation.navigate(

{routeName跳转页面的界面的路由名

, params传递参数

, action该界面也是navigator就运行action

, key导航到的路由的可选标识符存在时后退到这个路由})

8 状态 state

Params

this.props.state.params 取参数

SetParams navigate（）传参

Key

页面标识

Navigatio.State.key 获取

9 方法

goback（key可选，为空时返回上一页）

back（key 为空时返回上一个页面）

Dispatch（action）发送action

Navigation actions 更新当前state

Navigate 导航到其他页面

Back 返回上一个页面

Set Params 设置指定页面的Params

Init 初始化一个state为undifined

五组件之间的通信

1.有直接关系或间接关系的组件之间通信

如果A组件包含了B组件，或者说在A组件里创建了B组件，那么A组件就是B组件的父组件；反过来B组件就是A组件的子组件，是有直接关系的组件。

直接或间接关系组件之间的通信就分为下面这三种情况：

①.父组件到子组件：通过直接给属性赋值

②子组件到父组件：通过父组件给子组件传递回调函数

③间接关系的组件就是该组件与其子组件的子组件的关系。

所以无论中间隔了多少组件，只要是存在于这种关系链上的组件，都可以用上述两种方式来传递数据和事件。

兄弟组件之间的通信

是通过二者所共享的父组件的state来传递数据的

因为我们知道触发组件的渲染是通过setState方法的。因此，如果两个子组件都使用了他们的父组件的同一个state来渲染自己。

那么当其中一个子组件触发了setState,更新了这个共享的父组件的state，继而触发了父组件的render()方法，那么这两个子组件都会依据这个更新后的state来刷新自己，这样一来，就实现了子组件的数据传递。

2.无直接关系或间接关系的组件之间通信

①通知机制

DeviceEventEmitter，它是React Native内置的组件

既然是通知，那么自然有接收的一方，也有发送的一方，这两个组件都需要引入该通知组件。

DeviceEventEmitter 在RN内接受和发送消息

A页面注册通知：

import  {DeviceEventEmitter} from 'react-native';//…//调用事件通知

DeviceEventEmitter.emit('xxxName’,param);//xxxName:通知的名称 param：发送的消息（传参）

B页面接收通知

componentDidMount(){

    var self = this;

    this.listener =DeviceEventEmitter.addListener('xxxName',function(param){



    //  use param do something

    });}//xxxName:通知的名称    param:接收到的消息（传参）

componentWillUnmount(){

      this.listener.remove();

  }

//在componentWillUnmount 内需要我们手动移除通知

总结

1 首先，导入DeviceEventEmitter组件：

import {

    View,

    Text,

    Button,

    DeviceEventEmitter} from 'react-native';

2. 写一个发送消息的方法：


<Button title="发送通知" onPress={() => {

    DeviceEventEmitter.emit('left', '发送了个通知');}}/>

3. 写一个接收这个消息的方法：

在你想要接收到这个消息的组件内写如下方法，别忘了要导入DeviceEventEmitter：

在didmount方法中写好监听/接收方法，当有消息发送时，这就会接收到，并执行相应方法

componentDidMount() {

    this.deEmitter = DeviceEventEmitter.addListener('left', (a) => {

        alert('收到通知：' + a);

    });}(a) 这个a 就是那边发送的消息，可以是对象，我在这里发了个字符串过来。

当然，别忘了要卸载：


componentWillUnmount() {

    this.deEmitter.remove();}

② 本地持久化

AsyncStorage 是React Native中的 Key-Value 存储系统，可以做本地持久化。

首先看它主要的几个接口：

AsyncStorage常用接口

根据键来获取值，获取的结果会放在回调函数中：

static getItem(key: string, callback:(error, result))

根据键来设置值：

static setItem(key: string, value: string, callback:(error))

根据键来移除项：

static removeItem(key: string, callback:(error))

获取所有的键：

static getAllKeys(callback:(error, keys))

设置多项，其中 keyValuePairs 是字符串的二维数组，比如：[['k1', 'val1'], ['k2', 'val2']]：

static multiSet(keyValuePairs, callback:(errors))

获取多项，其中 keys 是字符串数组，比如：['k1', 'k2']：

static multiGet(keys, callback:(errors, result))

删除多项，其中 keys 是字符串数组，比如：['k1', 'k2']：

static multiRemove(keys, callback:(errors))

清除所有的项目：

static clear(callback:(error))

AsyncStorage使用注意事项

需要注意的是，在使用AsyncStorage的时候，setItem里面传入的数组或字典等对象需要使用JSON.stringtify()方法把他们解析成JSON字符串：

AsyncStorage.setItem(this.favoriteKey,JSON.stringify(favoriteKeys));

这里,favoriteKeys是一个数组。

反过来，在getItem方法里获取数组或字典等对象的时候需要使用JSON.parse方法将他们解析成对象：

AsyncStorage.getItem(this.favoriteKey,(error,result)=>{

if (!error) {

var favoriteKeys=[];

if (result) {

favoriteKeys=JSON.parse(result);

}

...

}

});

这里，result被解析出来后是一个数组。

六网络请求

在React Native中，经常使用Fetch函数来实现网络请求，它支持GET和POST请求并返回一个Promise对象，这个对象包含一个正确的结果和一个错误的结果。

1.POST

fetch('http://www.***.cn/v1/friendList', {

          method: 'POST',

          headers: { //header

                'token': ''

            },

          body: JSON.stringify({ //参数

                'start': '0',

                'limit': '20',

            })

 })

            .then((response) => response.json()) //把response转为json

            .then((responseData) => { // 上面的转好的json

                 //using responseData

            })

            .catch((error)=> {

                alert('返回错误');

            })

从上面的代码中，我们可以大致看到：Fetch函数中，第一个参数是请求url，第二个参数是一个字典，包括方法，请求头，请求体等信息。

随后的then和catch分别捕捉了fetch函数的返回值：一个Promise对象的正确结果和错误结果。注意，这里面有两个then，其中第二个then把第一个then的结果拿了过来。而第一个then做的事情是把网络请求的结果转化为JSON对象。

那么什么是Promise对象呢？

Promise 是异步编程的一种解决方案，Promise对象可以获取某个异步操作的消息。它里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

它分为三种状态：

Pending（进行中）、Resolved（已成功）和Rejected（已失败）

它的构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject：

resolve函数的作用：将Promise对象的状态从“未完成”变成“成功”(即从Pending变为Resolved)，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；。

reject函数的作用：将Promise对象的状态从“未完成”变成“失败”(即从Pending变为Rejected)，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

举个例子来看一下：

var promise = new Promise(function(resolve, reject) {

  // ... some code

  if (/* 异步操作成功 */){

    resolve(value);

  } else {

    reject(error);

  }

});

这里resolve和reject的结果会分别被配套使用的Fetch函数的.then和.catch捕捉。

我个人的理解是：如果某个异步操作的返回值是一个Promise对象，那么我们就可以分别使用.then和.catch来捕捉正确和错误的结果。

2. GET

fetch(url)

    .then(response=>response.json())

    .then(result=>{

         resolve(result);

     })

     .catch(error=>{

         reject(error)

     })

因为只是GET请求，所以不需要配置请求体，而且因为这个fetch函数返回值是一个Promise对象，所以我们可以用.then和.catch来捕捉正确和错误的结果。

在项目中，我们可以创建一个抓们负责网络请求的工具HttpUtils类，封装GET和POST请求。看一下一个简单的封装：

export default class HttpUtls{

   

    static get(url){

        return new Promise((resolve,reject)=>{

            fetch(url)

                .then(response=>response.json())

                .then(result=>{

                    resolve(result);

                })

                .catch(error=>{

                    reject(error)

                })

        })

    }

    static post(url, data) {

        return new Promise((resolve, reject)=>{

            fetch(url,{

                method:'POST',

                header:{

                    'Accept':'application/json',

                    'Content-Type':'application/json',

                },

                body:JSON.stringify(data)

            })

                .then(result=>{

                    resolve(result);

                })

                .catch(error=>{

                    reject(error)

                })

        })

    }

}

七离线缓存

离线缓存技术可以利用上文提到的Fetch和AsyncStorage实现，将请求url作为key，将返回的结果作为值存入本地数据里。

在下一次请求之前查询是否有缓存，缓存是否过期，如果有缓存并且没有过期，则拿到缓存之后，立即返回进行处理。否则继续进行网络请求。

而且即使没有网络，最终返回错误，也可以拿到缓存数据，立即返回。

来看一下在该项目里面是如何实现离线缓存的:

    fetchRespository(url) {

        return new Promise((resolve, reject) =>{

            //首先获取本地缓存

            this.fetchLocalRespository(url)

                .then((wrapData)=> {

                    //本地缓存获取成功

                if (wrapData) {

                    //缓存对象存在

                    resolve(wrapData,true);

                } else {

                    //缓存对象不存在，进行网络请求

                    this.fetchNetRepository(url)

                        //网路请求成功

                        .then((data) => {

                            resolve(data);

                        })

                        //网路请求失败

                        .catch(e=> {

                            reject(e);

                        })

                }

            }).catch(e=> {

                    //本地缓存获取失败，进行网络请求

                    this.fetchNetRepository(url)

                        //网路请求成功

                        .then(result => {

                            resolve(result);

                        })

                        //网路请求失败

                        .catch(e=> {

                            reject(e);

                        })

                })

        })

    }

在上面的方法中，包含了获取本地缓存和网络请求的两个方法。

首先是尝试获取本地缓存：

 //获取本地缓存

    fetchLocalRespository(url){

        return new Promise((resolve,reject)=>{

            // 获取本地存储

            AsyncStorage.getItem(url, (error, result)=>{

                if (!error){

                    try {

                        //必须使用parse解析成对象

                        resolve(JSON.parse(result));

                    }catch (e){

                        //解析失败

                        reject(e);

                    }

                }else {

                    //获取缓存失败

                    reject(error);

                }

            })

        })

    }

在这里，AsyncStorage.getItem方法的结果也可以使用Promise对象来包装。因此，this.fetchLocalRespository(url)的结果也就可以被.then和.catch捕捉到了。

如果获取本地缓存失败，就会调用网络请求：

   fetchNetRepository(url){

        return new  Promise((resolve,reject)=>{

            fetch(url)

                .then(response=>response.json())

                .catch((error)=>{

                    reject(error);

                }).then((responseData)=>{

                    resolve(responseData);

                 })

             })

    }