千帆竞发使用Flexbox布局,系统通信录

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很接近,可是它常常是用在对字体大小的设置中。通过它设置的书体,可以依照系统字体大小的变化而变化。

千帆竞发使用Flexbox布局,系统通信录。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>
)
}
}

补偿说Bellamy(Bellamy)下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地图