系统通信录,入门教程

React Native基础&入门教程:起初使用Flexbox布局

2018/07/04 · JavaScript
· React Native

原稿出处:
葡萄城控件   

在上篇中,作者分享了有些设置并调试React
Native应用进度里的一点经历,若是还没有看过的同校请点击React
Native基础&入门教程:调试React
Native应用的一小步》。

在本篇里,让我们联合来询问一下,什么是Flexbox布局,以及怎样拔取。

一、长度的单位

在上马任何布局从前,让我们来第一须求驾驭,在写React
Native组件样式时,长度的不带单位的,它代表“与设备像素密度无关的逻辑像素点”。

以此怎么知道呢?

大家驾驭,屏幕上一个发光的纤维点,对应着一个pixel(像素)点。

只要上面多个矩形,代表多个显示屏尺寸同等的装备,不过,它们持有的分辨率(resolution)分歧:

美高梅开户网址 1

图1.同样尺寸的装置 分歧的分辨率

图上的每一个小格子,其实就象征了一个像素(pixel)。可以看到,一个像素点的轻重,在那个三个大体尺寸一样但有所差异分辨率的装备上,是不等同的。

若果大家以像素为单位来设置一个界面元素的深浅,比如说2px的中度,那么这2px的尺寸上边的设备中就会是底下那个样子:

美高梅开户网址 2

图2.两样分辨率下的2px事实上中度

它们真实展现出的尺寸是不雷同的。

俺们想要一种长度单位,在同样物理尺寸大小的显示器上(不论分辨率什么人高哪个人低,只要物理尺寸大小相同即可),1个单位的长度所表示的物理尺寸是如出一辙的。那种单位就应当是单身于分辨率的,把它起一个名字叫做
density-independent
pixels,简称dp。那实则就是Android系统中所使用的尺寸单位。

举例来说,2dp宽,2dp高的情节,在分歧分辨率但显示器尺寸一样的设备上所显示出的情理大小是如出一辙的。(一个题外话:有些Android开发者提议持有可点击的按钮,宽高都不应有有限48dp。)

美高梅开户网址 3

图3. 2dp * 2dp大小的内容 在平等尺寸的显示屏中所占据的物理大小同等

Android中字体大小使用此外一个单位,叫做scale independent
pixels,简称sp。这几个单位和dp很接近,然而它一般是用在对字体大小的设置中。通过它设置的字体,可以根据系统字体大小的浮动而变化。

pixel与dp存在一个公式:px = dp * (dpi/160)。

dpi代表dot per
inch,是每英寸上的像素点,它也有个协调的总结公式,具体那里就不开展了。只须求了解大家为此要动用一个单独于设备分辨率的单位,首假使为了让使用在不一样分辨率的装备中,看起来一致。

在RN中,同样也有着一个近乎于dp的长度单位。若是我们想通晓自己的显示器以那种长度的计量下是有点单位,可以通过引入react-native包中的Dimensions得到,同时还足以查阅本机的像素比例是多少。

import {   Text,   View,   Dimensions,   PixelRatio } from
‘react-native’; const { height, width } = Dimensions.get(‘window’);
const pxRatio = PixelRatio.get(); <View style={styles.container}>
  <Text style={styles.welcome}>     {`width: ${width},
height: ${height}`}   </Text>   <Text
style={styles.welcome}>     {`pixel radio: ${pxRatio}`}
  </Text> </View>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import {
  Text,
  View,
  Dimensions,
  PixelRatio
} from ‘react-native’;
const { height, width } = Dimensions.get(‘window’);
const pxRatio = PixelRatio.get();
 
<View style={styles.container}>
  <Text style={styles.welcome}>
    {`width: ${width}, height: ${height}`}
  </Text>
  <Text style={styles.welcome}>
    {`pixel radio: ${pxRatio}`}
  </Text>
</View>

展现如下:

美高梅开户网址 4

图4. 当前手机的显示屏音信

它反映出,当前手机显示器的涨幅占据360个单位,高度占据640个单位。像素比例是3,实际上那就是一个
1080 * 1920 像素的手机。其中1080 = width * pixelRadio, 1920 = height
* pixelRatio

二、Flexbox布局

Flexbox布局,也就是弹性盒模型布局。也许有Android开发经历的爱人还对LinearLayout,RelativeLayout,FrameLayout等布局方法记忆犹新,不过对于更领悟CSS的Web开发者而言,使用flexbox布局一定会让她感触到更为顺手的支出体验。

RN中的flexbox布局,其实来自CSS中的flexbox(弹性盒子)布局规范。其实它在CSS中还处于Last
Call Working
Draft(最后征求意见稿)阶段,可是主流浏览器对它都有了了不起的支撑。在RN中,大致统统借鉴了里面的布局语义,同时更从未浏览器包容的郁闷,用起来是很便利的。RN中只是把CSS的特性用camelCase写法代替连字符写法。前面还还会看出,默许的flex方向也差距。

驾驭弹性盒模型布局,首先要知道多少个最中央的定义:Flex
Container(容器),Flex Item(项),Flex Direction(方向)和Axis(轴)。

1.Flex Container

就是包裹内容的器皿,要求把它的display设置为‘flex’(或者’inline-flex’)。

以下6个属性设置在容器上。

  1. alignItems 指定item在侧轴上的对齐格局
  2. alignContent 指定item在多条轴上的对齐格局
  3. flexDirection 指定主轴方向
  4. flexWrap 指定item在主轴方向如何换行
  5. flexFlow flexDirection属性和flexWrap属性的简写情势
  6. justifyContent 指定item在主轴上的遍布格局

2.Flex Item

容器做直接包裹的元素。所谓弹性盒布局,平常想要布局的东西就是它们。

以下6个属性设置在项目上。

  1. alignSelf 每个item可以单独设置对齐形式 覆盖Flex
    Container给安装的alignItems
  2. order 指定item排列顺序 数字越小越靠前
  3. flexGrow 指定item的拉伸比例
  4. flexShrink 指定item的压缩比例
  5. flexBasis 指定item在分配多余空间此前,占主轴的尺寸
  6. flex 其实是 flexGrow flexShrink flexBasis的简写

3.Flex Direction and Axis

在弹性盒子中,项目默许沿着main axis(主轴)排列,和主轴垂直的轴叫做cross
axis,叫做侧轴,或者交叉轴。

在盒子中,排列项目又多个趋势:水平的正反七个,垂直的正反三个。

布局代码:

<View> <View style={styles.row}> <Text
style={styles.item}>1</Text> <Text
style={styles.item}>2</Text> <Text
style={styles.item}>3</Text> </View> <View
style={styles.rowReverse}> <Text
style={styles.item}>1</Text> <Text
style={styles.item}>2</Text> <Text
style={styles.item}>3</Text> </View> <View
style={styles.column}> <Text style={styles.item}>1</Text>
<Text style={styles.item}>2</Text> <Text
style={styles.item}>3</Text> </View> <View
style={styles.columnReverse}> <Text
style={styles.item}>1</Text> <Text
style={styles.item}>2</Text> <Text
style={styles.item}>3</Text> </View> </View>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<View>
    <View style={styles.row}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
    <View style={styles.rowReverse}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
    <View style={styles.column}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
    <View style={styles.columnReverse}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
</View>

体制代码:

row: { backgroundColor: ‘#ffe289’, flexDirection: ‘row’ }, rowReverse:
{ flexDirection: ‘row-reverse’ }, column: { backgroundColor: ‘#ffe289’,
flexDirection: ‘column’ }, columnReverse: { flexDirection:
‘column-reverse’ },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
row: {
backgroundColor: ‘#ffe289’,
flexDirection: ‘row’
},
rowReverse: {
flexDirection: ‘row-reverse’
},
column: {
backgroundColor: ‘#ffe289’,
flexDirection: ‘column’
},
columnReverse: {
flexDirection: ‘column-reverse’
},

美高梅开户网址 5

图5. flexDirection

出于网上关于flex布局讲解的资源挺充足的,读者可以参照最终交给的连接,或者电动上网找寻,CSS中的和RN是相通的。

那里最首要分享个人在求学进程中,觉得不难招惹混淆的八个小点。

先是,justify-content和align-content这多少个特性,可能相比不难搞错它们成效的矛头。

内部,justify-content是安装items沿着主轴上是什么分布的。align-content是设置items沿着侧轴怎么样对齐的。

或者拿之前的例子,默许情形下,flex的势头是column(那几个与活动端与web页面差距,在web页面用CSS设置flex布局,默许的fiex-direction是row,即水平从左往右)。

在移动端,主轴默许是笔直方向,从上往下。让我们把它的可观设置高一点,放3个item在内部:

系统通信录,入门教程。结构代码:

<View> <View style={styles.defaultFlex}> <Text
style={styles.item}>1</Text> <Text
style={styles.item}>2</Text> <Text
style={styles.item}>3</Text> </View> </View>

1
2
3
4
5
6
7
<View>
    <View style={styles.defaultFlex}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
</View>

体制代码:

defaultFlex: { height: 300, backgroundColor: ‘#ffe289’, display: ‘flex’
}

1
2
3
4
5
defaultFlex: {
height: 300,
backgroundColor: ‘#ffe289’,
display: ‘flex’
}

美高梅开户网址 6

图6. 默认的flex

justify-content设置items在主轴方向的哪些分布,比如,如若大家添加justifyContent:
‘space-between’

defaultFlex: { height: 300, backgroundColor: ‘#ffe289’, display:
‘flex’, justifyContent: ‘space-between’ }

1
2
3
4
5
6
defaultFlex: {
height: 300,
backgroundColor: ‘#ffe289’,
display: ‘flex’,
justifyContent: ‘space-between’
}

items就沿主轴分开了。

美高梅开户网址 7

图7. justifyContent: ‘space-between’

假定大家设置alignItems:
‘center’,项目就沿侧轴(那里就是水平轴)居中了。注意那多少个特性是可以而且起效果的。

美高梅开户网址 8

图8. justifyContent: ‘space-between’ 以及 alignItems: ‘center’

接下来,值得提议的是,flex那么些特性,其实是flexGrow, flexShrink,
flexBasis(对应的CSS属性flex-grow,
flex-shrink和flex-basis)八个特性的组合。

我们一般在移动端来看的flex:1以此装置,其实是对flex-grow的装置。后者的默许值为0。使用把flex-grow设置为正整数的章程,可以让item按比例分布,或者在任何item为固定大时辰撑满剩余的盒子空间,就类似有着弹性一样。

社团代码:

<View style={styles.container}> <View
style={styles.flex1}></View> <View
style={styles.flex2}></View> <View
style={styles.flex3}></View> </View>

1
2
3
4
5
<View style={styles.container}>
    <View style={styles.flex1}></View>
    <View style={styles.flex2}></View>
    <View style={styles.flex3}></View>
</View>

体制代码:

container: { flex: 1 }, flex1: { // height: 99, flexGrow: 1,
backgroundColor: ‘orange’, }, flex2: { flexGrow: 2, backgroundColor:
‘lightblue’, }, flex3: { flexGrow: 3, backgroundColor: ‘green’, },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
container: {
flex: 1
},
flex1: {
// height: 99,
flexGrow: 1,
backgroundColor: ‘orange’,
},
flex2: {
flexGrow: 2,
backgroundColor: ‘lightblue’,
},
flex3: {
flexGrow: 3,
backgroundColor: ‘green’,
},

美高梅开户网址 9

图9. 按百分比分布

内需小心的是,假设父容器的尺寸为零(即没有设置宽高,或者没有设定flex),纵然子组件如果使用了flex,也是无能为力显示的。

因而那里最外层的施用了flex布局的,flex:1,表示让它占据了垂直的一切空间。

三、小小实战演练

让我们来差不多利用flex布局,对后边的事例稍加调整,完毕一个头顶,底部固定中度,中间内容占满剩下的显示屏的布局:

先是步,调整结构:

<View style={styles.container}> <View
style={styles.header}></View> <View
style={styles.body}></View> <View
style={styles.footer}></View> </View>

1
2
3
4
5
<View style={styles.container}>
    <View style={styles.header}></View>
    <View style={styles.body}></View>
    <View style={styles.footer}></View>
</View>

调全体制:

container: { flex: 1 }, header: { height: 60, backgroundColor: ‘orange’,
}, body: { flexGrow: 1, backgroundColor: ‘lightblue’, }, footer: {
height: 60, backgroundColor: ‘green’, }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
container: {
flex: 1
},
header: {
height: 60,
backgroundColor: ‘orange’,
},
body: {
flexGrow: 1,
backgroundColor: ‘lightblue’,
},
footer: {
height: 60,
backgroundColor: ‘green’,
}

美高梅开户网址 10

图10. 有头尾的布局

第二部,给header添加标题。

俺们让尾部的分为3片段,右侧模拟一个再次回到按钮,中间彰显标题文字,左边模拟一把小叉:

<View style={styles.header}> <Text
style={styles.back}>重临</Text> <Text
style={styles.title}>那是一个标题</Text> <Text
style={styles.exit}>×</Text> </View>

1
2
3
4
5
<View style={styles.header}>
    <Text style={styles.back}>返回</Text>
    <Text style={styles.title}>这是一个标题</Text>
    <Text style={styles.exit}>×</Text>
</View>

亟需把header的flexDirection设置为水平方向:

header: { height: 60, backgroundColor: ‘orange’, flexDirection: ‘row’,
alignItems: ‘center’ }, back: { color: ‘white’, marginLeft: 15 }, title:
{ flexGrow: 1, fontSize: 20, color: ‘white’, textAlign: ‘center’ },
exit: { marginRight: 20, fontSize: 20, color: ‘white’ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
header: {
height: 60,
backgroundColor: ‘orange’,
flexDirection: ‘row’,
alignItems: ‘center’
},
back: {
color: ‘white’,
marginLeft: 15
},
title: {
flexGrow: 1,
fontSize: 20,
color: ‘white’,
textAlign: ‘center’
},
exit: {
marginRight: 20,
fontSize: 20,
color: ‘white’
}

美高梅开户网址 11

图11. header有了标题

其三步,大家得以把footer三等分,模拟成菜单的典范:

<View style={styles.footer}> <Text
style={styles.firstMenu}>添加</Text> <Text
style={styles.menu}>删除</Text> <Text
style={styles.menu}>修改</Text> </View>

1
2
3
4
5
<View style={styles.footer}>
    <Text style={styles.firstMenu}>添加</Text>
    <Text style={styles.menu}>删除</Text>
    <Text style={styles.menu}>修改</Text>
</View>

加上体制:

footer: { height: 60, backgroundColor: ‘green’, flexDirection: ‘row’,
alignItems: ‘center’ }, menu: { flexGrow: 1, textAlign: ‘center’,
borderColor: ‘white’, borderLeftWidth: 1, color: ‘white’ }, firstMenu: {
flexGrow: 1, textAlign: ‘center’, color: ‘white’ },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
footer: {
height: 60,
backgroundColor: ‘green’,
flexDirection: ‘row’,
alignItems: ‘center’
},
menu: {
flexGrow: 1,
textAlign: ‘center’,
borderColor: ‘white’,
borderLeftWidth: 1,
color: ‘white’
},
firstMenu: {
flexGrow: 1,
textAlign: ‘center’,
color: ‘white’
},

美高梅开户网址 12

图12. footer三等分 模拟菜单

说到底,让我们在body里也填充多少个带按钮的输入框。

引入TextInput和Button组件,然后把它们分三组放入body中,

JavaScript

<View style={styles.body}> <View style={styles.inputRow}>
<TextInput style={styles.textInput}></TextInput> <Button
style={styles.btn} onPress={() => {}} title=”确定”></Button>
</View> <View style={styles.inputRow}> <TextInput
style={styles.textInput}></TextInput> <Button
style={styles.btn} onPress={() => {}}
title=”分外确定”></Button> </View> <View
style={styles.inputRow}> <TextInput
style={styles.textInput}></TextInput> <Button
style={styles.btn} onPress={() => {}}
title=”确定一定以及自然”></Button> </View> </View>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<View style={styles.body}>
    <View style={styles.inputRow}>
        <TextInput style={styles.textInput}></TextInput>
        <Button style={styles.btn} onPress={() => {}} title="确定"></Button>
    </View>
    <View style={styles.inputRow}>
        <TextInput style={styles.textInput}></TextInput>
        <Button style={styles.btn} onPress={() => {}} title="非常确定"></Button>
    </View>
    <View style={styles.inputRow}>
        <TextInput style={styles.textInput}></TextInput>
        <Button style={styles.btn} onPress={() => {}} title="确定一定以及肯定"></Button>
    </View>
</View>

丰盛样式:

body: { flexGrow: 1, backgroundColor: ‘lightblue’, }, inputRow: {
flexDirection: ‘row’, alignItems: ‘center’, marginLeft: 10, marginRight:
10 }, textInput: { flex: 1 }, btn: { minWidth: 60 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body: {
flexGrow: 1,
backgroundColor: ‘lightblue’,
},
inputRow: {
flexDirection: ‘row’,
alignItems: ‘center’,
marginLeft: 10,
marginRight: 10
},
textInput: {
flex: 1
},
btn: {
minWidth: 60
}

美高梅开户网址 13

flex布局的一个常用实践是,部分情节稳定宽高,让多余的始末自适应。

像上边那样,我们给Button有一个微小宽度,且TextInput的flexGrow为1,那样的做法得以兑现,TextInput总是占满剩下的涨幅,且可伸缩。

看了地方的例证,是或不是觉得在React Native中运用Flexbox布局也挺不难吗?

可望那是个不利的初始。

1 赞 收藏
评论

美高梅开户网址 14

一、简介

二〇〇九年,W3C提议了一种新的方案—-Flex布局,可以方便、完整、响应式地促成各个页面布局。

flex是Flexible
Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的一帆风顺。采纳flex布局的元素,称为flex容器(flex
Container),简称”容器”。它的具有子元素自动变成容器成员,称为flex项目(flex
item),简称”项目”。”容器”对应iOS中的父view概念,”项目”对应iOS中的子view概念。

React
Native中的Flexbox的劳作规律和web上的CSS基本一致,当然也设有个别差距。首先是默许值分歧:flexDirection的默许值是column而不是row,而flex也只可以指定一个数字值。

装有说,RN中的Flex布局来自于CSS,可是多少特殊性。RN中得以用到的品质,可以在法定文档中查阅。

调用手机通信功效

/**

二、RN中Flex布局用法

那边大家用react-native-communications这么些三方框架
  • 在HybridApp里心想事成那几个功用依旧挺麻烦的,要求客户端封装好接口给H5调用,可是在ReactNative里,一个零件就能搞定——
    react-native-communications,安装请查看官方文档
    以此组件安装很粗略,接济的功效有:拨号、发短信、发Email、打开网页 等
    ,下边是合法一个归咎的例子:

import React, { Component }  from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import Communications from 'react-native-communications';
class RNCommunications extends Component({
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={() => Communications.phonecall('0123456789', true)}>
          <View style={styles.holder}>
            <Text style={styles.text}>Make phonecall</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => Communications.email(['emailAddress1', 'emailAddress2'],null,null,'My Subject','My body text')}>
          <View style={styles.holder}>
            <Text style={styles.text}>Send an email</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => Communications.text('0123456789')}>
          <View style={styles.holder}>
            <Text style={styles.text}>Send a text/iMessage</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => Communications.web('https://github.com/facebook/react-native')}>
          <View style={styles.holder}>
            <Text style={styles.text}>Open react-native repo on Github</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
});
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'rgb(253,253,253)',
  },
  holder: {
    flex: 0.25,
    justifyContent: 'center',
  },
  text: {
    fontSize: 32,
  },
});
AppRegistry.registerComponent('RNCommunications', () => RNCommunications);
  • Sample React Native App
  • https://github.com/facebook/react-native
  • @flow
    */

1、基本概念

容器默许存在两根轴:主轴(main axis)和交叉轴(cross
axis)。主轴的开首地点(与边框的交叉点)叫做main start,甘休地点叫做main
end;交叉轴的启幕地点叫做cross start,截至地点叫做cross
end。项目默许沿主轴排列。单个项目占据的主轴空间叫做main
size,占据的陆续轴空间叫做cross size。

Flex布局与Android的线性布局(LinearLayout)有点类似,都足以安装布局方向,对齐格局,以及项目标布局占位权重,分化是flex容器中项目遍布的总长度超出屏幕宽度,超出的那部分序列不可知,项目不会变形,或者可以安装flexWrap属性,让容器可以分行布局,所有系列都能显得出来。

相比较iOS:FlexBox没有XY轴的概念,主轴和穿插轴不是固定的;也尚未坐标值(x,y)的概念。后文子禽介绍!

走访手机相册

  • 调取手机相册和上传图片是个老生常谈的题材,ReactNative
    里可以因此react-native-image-picker来处理,安装请查看法定文档拎一段代码片段:

import ImagePicker from 'react-native-image-picker'
const options = {
    title: '选择上传图片', // specify null or empty string to remove the title
    cancelButtonTitle: '取消',
    takePhotoButtonTitle: '拍照...', // specify null or empty string to remove this button
    chooseFromLibraryButtonTitle: '从库中选择...', // specify null or empty string to remove this button
    //customButtons: {
    //    'Choose Photo from Facebook': 'fb', // [Button Text] : [String returned upon selection]
    //},
    cameraType: 'back', // 'front' or 'back'
    mediaType: 'photo',
    //videoQuality: 'high', // 'low', 'medium', or 'high'
    maxWidth: 200, // photos only
    maxHeight: 200, // photos only
    allowsEditing: true,
    noData: false,
}
//...
onUpload() {
        ImagePicker.showImagePicker(options, (response) => {
            if (response.didCancel) {
                //console.log('User cancelled image picker');
            }
            else if (response.error) {
                //console.log('ImagePicker Error: ', response.error);
            } else {
                let source = {uri: response.uri.replace('file://', ''), isLocal: true, isStatic: true};
                this.setState({ form: {...this.state.form, avatar: source} })
            }
        })
    }
``

![image.png](http://upload-images.jianshu.io/upload_images/2969114-475487f2dd4596b9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

####模态框
- 模态框在App里使用的也比较多,比如确认模态、加载模态、输入模态等,出于良好的用户体验和兼容性考虑,我这里底层采用react-native-modalbox
,然后根据不同功能进行二次加工。
[](http://jafeney.com/2016/06/17/2016-06-17-react-native/#ConfirmModal)ConfirmModal

很常见,不多做介绍,copy下面代码 直接可以使用

import React, { Component } from ‘react’;
import {
Dimensions,
StyleSheet,
Text,
TouchableOpacity,
View,
} from ‘react-native’;
import ModalBox from ‘react-native-modalbox’;
const styles = StyleSheet.create({
modal: {
borderRadius: 10,
},
modalContent: {
flex: 1,
paddingLeft: 10,
paddingRight: 10,
},
h2: {
marginTop: 15,
fontSize: 20,
color: ‘#555’,
textAlign: ‘center’,
},
modalOption: {
flexDirection: ‘row’,
borderTopWidth: 1,
borderTopColor: ‘#ddd’,
},
modalCancel: {
flex: 1,
padding: 15,
},
modalCancelText: {
fontSize: 16,
textAlign: ‘center’,
},
modalConfirm: {
flex: 1,
padding: 15,
borderLeftWidth: 1,
borderLeftColor: ‘#ddd’,
},
modalConfirmText: {
fontSize: 16,
textAlign: ‘center’,
},
message: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
messageText: {
color: ‘#555’,
fontSize: 16,
},
});
export default class ConfirmModal extends Component {
constructor(props) {
super(props);
}
open() {
this.refs.modal.open()
}
close() {
this.refs.modal.close()
}
render() {
let { width } = Dimensions.get(‘window’);
return (
<ModalBox
ref={“modal”}
style={[styles.modal, {width: this.props.width || (width-60), height:
this.props.height || 200}]}
backdropOpacity={0.3}
position={“center”}
isOpen={false}>
<View style={styles.modalContent}>
<Text style={styles.h2}>{ this.props.title || ‘提示’
}</Text>
<View style={styles.message}><Text
style={styles.messageText}>{ this.props.message
}</Text></View>
</View>
<View style={styles.modalOption}>
<TouchableOpacity style={styles.modalCancel} onPress={()=>
this.refs.modal.close() }>
<Text style={styles.modalCancelText}>取消</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.modalConfirm} onPress={()=>
this.props.onConfirm() }>
<Text style={styles.modalConfirmText}>确定</Text>
</TouchableOpacity>
</View>
</ModalBox>
)
}
}

LoadingModal

其一也很常见,copy上边代码 直接可以动用

import React, { Component } from ‘react’;
import {
StyleSheet,
} from ‘react-native’;
import ModalBox from ‘react-native-modalbox’;
const styles = StyleSheet.create({
modal: {
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘transparent’
},
});
export default class LoadingModal extends Component {
constructor(props) {
super(props);
}
open() {
this.refs.modal.open()
}
close() {
this.refs.modal.close()
}
render() {
return (
<ModalBox
style={styles.modal}
ref=”modal”
position={“center”}
backdrop={false}
isOpen={this.props.isOpen || false}
//backdropOpacity={.3}
backdropPressToClose={false}
animationDuration={10}
>
</ModalBox>
);
}
}

####PickerModal

- 这个特别讲解一下,PickerModal用于页面上的Picker的处理,显示效果如下:

![image.png](http://upload-images.jianshu.io/upload_images/2969114-517be8b72ca2acb6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

import React, { Component } from ‘react’;
import {
Dimensions,
StyleSheet,
Text,
TouchableOpacity,
Picker,
View,
} from ‘react-native’;
import ModalBox from ‘react-native-modalbox’
import dismissKeyboard from ‘../mixins/dismiss-keyboard’
const styles = StyleSheet.create({
popup: {
},
popupContent: {
flex: 1,
paddingLeft: 10,
paddingRight: 10,
},
h2: {
marginTop: 15,
fontSize: 20,
color: ‘#555’,
textAlign: ‘center’,
},
popupOption: {
flexDirection: ‘row’,
borderTopWidth: 1,
borderTopColor: ‘#ddd’,
},
popupCancel: {
flex: 1,
padding: 15,
},
popupCancelText: {
fontSize: 16,
textAlign: ‘center’,
},
popupConfirm: {
flex: 1,
padding: 15,
borderLeftWidth: 1,
borderLeftColor: ‘#ddd’,
},
popupConfirmText: {
fontSize: 16,
textAlign: ‘center’,
},
message: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
messageText: {
color: ‘#555’,
fontSize: 16,
},
});
export default class PickerModal extends Component {
constructor(props) {
super(props);
}
open() {
dismissKeyboard()
this.refs.modal.open()
}
close() {
this.refs.modal.close()
}
_renderPickerItems(data) {
data.map((item)=>{
return [
<Picker.Item label={item[0]} value={item[1]} />
]
})
}
render() {
let { width } = Dimensions.get(‘window’);
return (
<ModalBox
ref={“modal”}
style={[styles.popup, {width: this.props.width || (width), height:
this.props.height || 200}]}
backdropOpacity={0.3}
position={“bottom”}
swipeToClose={false}
isOpen={false}>
<View style={styles.popupContent}>
<Picker {…this.props}>
{this.props.dataSource.map((item,i)=> {
if (item.length) return <Picker.Item key={i} label={item[0]}
value={item[1]} />
})}
</Picker>
</View>
</ModalBox>
)
}
}

补充说雀巢(Nutrilon)下dismissKeyboard()这么些法子,该办法用于关闭页面的keyboard(键盘),ReactNative
默许没有那种方法,需求自己编排:

import { TextInput } from ‘react-native’;
const { State: TextInputState } = TextInput;
export default function dismissKeyboard() {
TextInputState.blurTextInput(TextInputState.currentlyFocusedField());
}

####导航条

- 这个组件其实ReactNative提供了原生版本的,但是样式和功能上不好控制,建议自己手写一个,代码如下:

import React, { Component } from “react”;
import {
Image,
Platform,
美高梅开户网址 ,StyleSheet,
Text,
TouchableOpacity,
View,
} from ‘react-native’;
const styles = StyleSheet.create({
leftButton: {
marginLeft: 5,
},
rightButton: {
marginRight: 5,
},
button: {
width: 44,
height: 44,
justifyContent: ‘center’,
alignItems: ‘center’,
},
nav: {
backgroundColor: ‘#f9f9f9’,
flexDirection: ‘row’,
alignItems: ‘center’,
},
title: {
flex: 1,
height: 44,
justifyContent: ‘center’,
},
btnText: {
fontSize: 16,
color: ‘#777’,
},
marginForIOS: {
marginTop: 20,
},
titleText: {
fontSize: 20,
textAlign: ‘center’,
color: ‘#555’
}
});
export class RightButton extends Component {
render() {
return (
<TouchableOpacity
style={styles.button}
onPress={this.props.onPress}>
{ this.props.text ? <Text
style={styles.btnText}>{this.props.text}</Text> : null }
{ this.props.icon ? <Image source={this.props.icon}
style={styles.rightButton} /> : null }
</TouchableOpacity>
);
}
}
export class NavigatorBar extends Component {
_leftButton() {
if (this.props.navigator.getCurrentRoutes().length > 1) return (
<TouchableOpacity
style={styles.button}
onPress={()=> this.props.navigator.pop() }>
<Image source={require(‘../assets/icon-nav-left.png’)}
style={styles.leftButton} />
</TouchableOpacity>
)
}
_rightButton() {
if (this.props.rightButton) return (
<RightButton {…this.props.rightButton} />
)
}
render() {
return (
<View style={styles.nav}>
<View style={[styles.button, Platform.OS==’ios’ ?
styles.marginForIOS : null]}>
{this._leftButton()}
</View>
<View style={[styles.title, Platform.OS==’ios’ ? styles.marginForIOS
: null]}>
<Text style={styles.titleText}>{ this.props.name }</Text>
</View>
<View style={[styles.button, Platform.OS==’ios’ ?
styles.marginForIOS : null]}>
{this._rightButton()}
</View>
</View>
);
}
}

- 然后在[Container](http://lib.csdn.net/base/docker)里就可以使用了:

import { NavigatorBar } from ‘../components/navigator’

- 没有右侧按钮
<NavigatorBar name="登录" navigator={this.props.navigator} />

- 右侧按钮为图标

<NavigatorBar name=”我的” navigator={this.props.navigator}
rightButton={{onPress: ()=>{this.props.navigator.push({component:
Setting})}, icon: require(‘../../assets/icon-set.png’)}} />

- 右侧按钮为文字

<NavigatorBar name=”我的订单” navigator={this.props.navigator}
rightButton={{text: ‘历史 ‘, onPress: ()=>
this.props.navigator.push({component: OrderHitory}) }} />

import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
PixelRatio,
Text,
View
} from ‘react-native’;

2、Flex基本属性

flex属性表明在:/node_modules/react-native/Libraries/StyleSheet/LayoutPropTypes.js

`//
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
flexDirection: ReactPropTypes.oneOf([
‘row’,
‘column’
]),

//
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
flexWrap: ReactPropTypes.oneOf([
‘wrap’,
‘nowrap’
]),

// How to align children in the main direction
//
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
justifyContent: ReactPropTypes.oneOf([
‘flex-start’,
‘flex-end’,
‘center’,
‘space-between’,
‘space-around’
]),

// How to align children in the cross direction
//
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
alignItems: ReactPropTypes.oneOf([
‘flex-start’,
‘flex-end’,
‘center’,
‘stretch’
]),

// How to align the element in the cross direction
//
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
alignSelf: ReactPropTypes.oneOf([
‘auto’,
‘flex-start’,
‘flex-end’,
‘center’,
‘stretch’
]),

//children scale in container view
//
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
flex: ReactPropTypes.number,`

由上述代码,我们得以看来flex的特性并不多,而且很好回想,以下将会相继介绍
flex属性可以分成容器属性和体系性质
其间容器属性包罗:flexDirection,justifyContent,alignItems,flexWrap
种类性质包括:flex,alignSelf
以下介绍会使用到有些代码和图片,先定义八个简易组件,方便通晓

var Circle = React.createClass({
render : function(){
    ;var size = this.props.size || 20;
    var color = this.props.color || '#527fe4';
    return <View style={{backgroundColor:color,borderRadius:size/2,height:size,width:size,margin:1}}/>
  },
});

//定义一个放置标题和项目的容器,传入的value属性将会是需要介绍的flex属性
var Value = React.createClass({
  render : function(){
    var value = 
      <View>
        <Text style={styles.valueText}>{this.props.title}</Text>
        <View style={[styles.valueContainer,this.props.value]}>
          {this.props.children}
        </View>
      </View>;
    return value;
  },
});

//定义一个数组放置5个圆
var children = [<Circle/>,<Circle/>,<Circle/>,<Circle/>,<Circle/>];```

###2.1 容器属性

1、flexDirection:布局方向,决定主轴的方向,默认值是column,即纵向布局
描述
row 横向布局,主轴为水平方向
column 纵向布局,主轴为竖直方向

row:横向布局

代码:

<Value title=’row’ value={{flexDirection:’row’}}>
{children}
</Value>

视图:
![97158B7B-CC32-4769-847F-A08CE7DC209B.png](http://upload-images.jianshu.io/upload_images/2305876-db41bc5aaf500302.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

column:纵向布局
代码:

<Value title=’column’ value={{flexDirection:’column’}}>
{children}
</Value>

视图:

![20160710123731597.jpg](http://upload-images.jianshu.io/upload_images/2305876-602391e00b4d8894.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


2、justifyContent:主轴方向对齐方式,子组件和容器的对齐方式,默认值是flex-start,即主轴的开端
描述
flex-start 主轴开端
center 居中
flex-end 主轴末端
space-between 项目与项目之间插入相等空隙
space-around 项目两旁插入相等空隙

flex-start:主轴初叶

代码:

<Value title=’flex-start’ value={{flexDirection:’row’,
justifyContent:’flex-start’}}>
{children}
</Value>

视图:

![20160710123752426.jpg](http://upload-images.jianshu.io/upload_images/2305876-68f3e2bfcc2d0acf.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

center:主轴的中间位置
代码:

<Value title=’center’
value={{flexDirection:’row’,justifyContent:’center’}}>
{children}
</Value>

视图:
![20160710123811612.jpg](http://upload-images.jianshu.io/upload_images/2305876-6ed71436d80ddc31.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

flex-end:主轴的末端位置
代码:

<Value title=’flex-end’
value={{flexDirection:’row’,justifyContent:’flex-end’}}>
{children}
</Value>

视图:
![20160710123828083.jpg](http://upload-images.jianshu.io/upload_images/2305876-c329b7e35a156230.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

space-between:项目与项目之间插入相同距离的空隙
代码:

<Value title=’space-between’
value={{flexDirection:’row’,justifyContent:’space-between’}}>
{children}
</Value>

视图:
![20160710123845099.jpg](http://upload-images.jianshu.io/upload_images/2305876-edef1daaa8fd306a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

space-around:项目两旁插入相同距离的空隙
代码:

<Value title=’space-around’
value={{flexDirection:’row’,justifyContent:’space-around’}}>
{children}
</Value>

视图:

![20160710123859802.jpg](http://upload-images.jianshu.io/upload_images/2305876-72248aac6862b6d3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

3、alignItems:交叉轴方向对齐方式,子组件和容器的对齐方式,默认值flex-start,即交叉轴开端
描述
flex-start 交叉轴开端
center 交叉轴居中
flex-end 交叉轴末端

flex-start:交叉轴开始

![20160710123930800.jpg](http://upload-images.jianshu.io/upload_images/2305876-d5b418a97eb8a6c6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
center:交叉轴的中间位置
![20160710123938397.jpg](http://upload-images.jianshu.io/upload_images/2305876-b65919e47a239d3a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
flex-end:交叉轴的末端位置
![20160710123946034.jpg](http://upload-images.jianshu.io/upload_images/2305876-2975afe455bd778b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

flexWrap:包含内容,默认值是nowrap,不包裹所有内容
描述
nowrap 项目沿主轴方向布局,超出容器长度的部分不可见
wrap 项目沿主轴布局所需长度大于容器总长度时,分行布局,所有项目内容都可见

nowrap:不包裹内容

代码:

<Value title=’nowrap’
value={{flexWrap:’nowrap’,flexDirection:’row’}}>
{children}{children}{children}{children}
</Value>

视图:
![20160710124011461.jpg](http://upload-images.jianshu.io/upload_images/2305876-ea4d01dc45b04a19.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

wrap:包裹内容
代码:

<Value title=’wrap’
value={{flexWrap:’wrap’,flexDirection:’row’}}>
{children}{children}{children}{children}
</Value>

视图:
![20160710124019144.jpg](http://upload-images.jianshu.io/upload_images/2305876-fc66d654740f827f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###2.2 项目属性
1、flex:布局权重
描述
>=0 项目占位权重

1:0:flex=0的品种占用空间仅为情节所需空间,flex=1的档次会占用其他所有空中

代码:

<Value title=’1:0′ value={{flexDirection:’row’}}>
<Text
style={{color:’white’,flex:1,textAlign:’center’,backgroundColor:’red’,fontSize:20,paddingHorizontal:10}}>flex=1</Text>
<Text
style={{color:’white’,textAlign:’center’,backgroundColor:’yellow’,fontSize:20,paddingHorizontal:10}}>flex=0</Text>
</Value>

![20160710124042149.jpg](http://upload-images.jianshu.io/upload_images/2305876-b79e28b56be5c95b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2:1
代码:

<Value title=’2:1′ value={{flexDirection:’row’}}>
<Text
style={{color:’white’,flex:2,textAlign:’center’,backgroundColor:’blue’,fontSize:20}}>flex=2</Text>
<Text
style={{color:’white’,flex:1,textAlign:’center’,backgroundColor:’green’,fontSize:20}}>flex=1</Text>
</Value>

![20160710124050258.jpg](http://upload-images.jianshu.io/upload_images/2305876-b97631c340b6e98c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
1:1:1:1
代码:

<Value title=’1:1:1:1′ value={{flexDirection:’row’}}>
<Text
style={{color:’white’,flex:1,textAlign:’center’,backgroundColor:’red’,fontSize:20}}>flex=1</Text>
<Text
style={{color:’white’,flex:1,textAlign:’center’,backgroundColor:’yellow’,fontSize:20}}>flex=1</Text>
<Text
style={{color:’white’,flex:1,textAlign:’center’,backgroundColor:’blue’,fontSize:20}}>flex=1</Text>
<Text
style={{color:’white’,flex:1,textAlign:’center’,backgroundColor:’green’,fontSize:20}}>flex=1</Text>

</Value>
![20160710124105801.jpg](http://upload-images.jianshu.io/upload_images/2305876-dcbb3b1500328ef8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2、alignSelf:项目交叉轴方向自身对齐方式,子组件和容器的对齐方式,会覆盖alignItems的设置。
描述
flex-start 开端
center 居中
flex-end 末端
代码:

<Value title=’alignSelf’
value={{flexDirection:’row’,height:30,alignItems:’center’}}>
<View style={{alignSelf:’flex-start’}}>
<Circle/>
</View>
<View style={{alignSelf:’flex-end’}}>
<Circle/>
</View>
<View style={{alignSelf:’flex-start’}}>
<Circle/>
</View>
<View style={{alignSelf:’flex-end’}}>
<Circle/>
</View>
<View style={{alignSelf:’flex-start’}}>
<Circle/>
</View>
</Value>

视图:
![20160710124121472.jpg](http://upload-images.jianshu.io/upload_images/2305876-97483e4bb247ab2d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##3、 Layout的其他属性
layout除了flex属性之外,当然还有其他属性,同样声明在:/node_modules/react-native/Libraries/StyleSheet/LayoutPropTypes.js

width: ReactPropTypes.number,
height: ReactPropTypes.number,
top: ReactPropTypes.number,
left: ReactPropTypes.number,
right: ReactPropTypes.number,
bottom: ReactPropTypes.number,
margin: ReactPropTypes.number,
marginVertical: ReactPropTypes.number,
marginHorizontal: ReactPropTypes.number,
marginTop: ReactPropTypes.number,
marginBottom: ReactPropTypes.number,
marginLeft: ReactPropTypes.number,
marginRight: ReactPropTypes.number,
padding: ReactPropTypes.number,
paddingVertical: ReactPropTypes.number,
paddingHorizontal: ReactPropTypes.number,
paddingTop: ReactPropTypes.number,
paddingBottom: ReactPropTypes.number,
paddingLeft: ReactPropTypes.number,
paddingRight: ReactPropTypes.number,
borderWidth: ReactPropTypes.number,
borderTopWidth: ReactPropTypes.number,
borderRightWidth: ReactPropTypes.number,
borderBottomWidth: ReactPropTypes.number,
borderLeftWidth: ReactPropTypes.number,

position: ReactPropTypes.oneOf([
‘absolute’,
‘relative’
]),

属性 类型 描述
width number 容器或者项目的宽度
height number 容器或者项目的高度
top,bottom,left,right number 在父容器的上下左右偏移量
margin number 留边,留边的空间不属于容器或者项目自身空间
marginHorizontal number 水平方向留边
marginVertical number 垂直方向留边
padding number 填充,填充的空间输入容器或者项目自身空间
paddingHorizontal number 水平方向填充
paddingVertical number 垂直方向填充
borderWidth number 边界宽度
position enum 位置方式:absolute与relative
position:默认值为relative
描述
absolute 绝对布局
relative 相对布局
react的默认位置方式是relative,项目是一个接一个排列下去的,absolute为绝对布局,一般会与left和top属性一起使用。有时候我们需要实现某些项目重叠起来,absolute属性就能发挥作用了,例如下图:
![20160710124137682.jpg](http://upload-images.jianshu.io/upload_images/2305876-1f7da8cfd80aa011.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

react的基本组件暂时不支持以图片作为背景,所以这里的的转入是一个文本组件,而红色的圆形是一个图片组件,在iOS里面组件也可以作为容器,图片可以正常显示,但是在Android里面,可能存在些问题,如果使用组件作为容器都会出现图片变得好奇怪,所以就可以absoulte来解决问题了。代码如下:

<View
style={{width:80,height:80,alignItems:’center’,justifyContent:’center’}}>
<Image
style={{position:’absolute’,left:0,top:0,resizeMode:’contain’,width:80,height:80}}
source={require(‘image!finance_usercenter_ic_into’)}/>
<Text
style={{width:80,textAlign:’center’,color:’white’,fontSize:16}}>转入</Text>
</View>

这里的View跟Android的View有点不一样,View是可以作为容器也可以作为项目,View作为容器还有其他很多属性,例如backgroundColor,borderWidth,borderColor,opacity等等,这里不一一介绍。
**注意:absolute时,控件的上下左右是相对于container;relative时,控件用的是marginLeft,marginTop,marginBottom,marginRight,分别相对于left,top,bottom,right的元素(container或者item)。**

4 布局的尺寸说明
react native的宽高是不需要带单位的,那些width,height,padding,margin的赋值都直接是数字的,当你设定width:10,在IOS的话就是设置了10pt宽度,而在Android上面是10dp,在做项目时,辛勤的美工会帮我们标出所有UI控件的宽,高,边距等等,他们用的单位也是dp,所以赋值style中宽高时,直接填入数字即可。

alignItems 和 alignSelf区别

alignItems

调整伸缩项目在侧轴上的定位方式

可选值: flex-start , flex-end , center , stretch

![20160710123625127.jpg](http://upload-images.jianshu.io/upload_images/2305876-2e1383a71736424a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

alignSelf

alignSelf 属性会覆盖容器的 alignItems 属性,取值和用法 alignItems 一样。

可选值: auto , flex-start , flex-end , center , stretch

参考链接:
A Complete Guide to Flexbox
http://blog.csdn.net/teng_ontheway/article/details/51870951 https://segmentfault.com/a/1190000002658374

class RAsecond extends Component {
render() {
return (
<View style={styles.flex}>
<View style={styles.container}>
<View style={[styles.item,styles.center]}>
<Text style={styles.font}>酒店</Text>
</View>
<View style={styles.item,styles.lineLeftRight}>
<View style={[styles.center,styles.flex,styles.lineCenter]}>
<Text style={styles.font}>国外饭馆</Text>
</View>
<View style={[styles.center,styles.flex]}>
<Text style={styles.font}>特惠旅舍</Text>
</View>
</View>
<View style={styles.item}>
<View style={[styles.center,styles.flex,styles.lineCenter]}>
<Text style={styles.font}>团购</Text>
</View>
<View style={[styles.center,styles.flex]}>
<Text style={styles.font}>客栈</Text>
</View>
</View>
</View>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
marginTop:200,
marginLeft:5,
marginRight:5,
height:84,
flexDirection:’row’,
borderRadius:5,
padding:2,
backgroundColor: ‘#FF0067’,
},
item: {
flex:1,
height:80
},
center: {
justifyContent:’center’,
alignItems:’center’,
},
flex:{
flex:1,
},
font:{
color:’#fff’,
fontSize:16,
fontWeight:’bold’,
},
lineLeftRight:{
borderLeftWidth:1/PixelRatio.get(),
borderRightWidth:1/PixelRatio.get(),
borderColor:’#fff’,
},
lineCenter:{
borderBottomWidth:1/PixelRatio.get(),
borderColor:’#fff’,
}
});

AppRegistry.registerComponent(‘RAsecond’, () => RAsecond);

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图