项目连接： 93Laer/MyDemo
ReactNative使用手册
关键点：
- 1、在RN中宽高，size等使用的单位是dp，还是px
- 2、flex使用，以及动态阔张效果总结
由于在RN的官方文档中并未提起我们在对组件宽高或是字体大小设值，这个值是px还是dp。所以在正式开始讲解flex宽高使用前，先做一个实验，看看我们设值的到底是px,还是dp(当然我在RN中说px,dp可能不够准确，但是我们暂时这样理解吧，这个不重要)
获取屏幕的宽高
/**
* 创建人：赖天兵
* 时间： 2018/2/11
* 简书：https://www.jianshu.com/u/2229fd214880
* 掘金：https://juejin.im/user/58647e21128fe1006d0f3f3e
* github：https://github.com/93Laer
* 描述：
*/
import React,{Component}from 'react';
import {Text}from 'react-native'
var Dimensions = require('Dimensions');
var PixelRatio = require('PixelRatio');
export default class FlexboxTest extends Component{
render() {
return <Text >
window.width={Dimensions.get('window').width + '\n'}
window.height={Dimensions.get('window').height + '\n'}
pxielRatio={PixelRatio.get()}
</Text>
//pxielRatio 像素比类似与安卓的display metrics，也就是dp和px的转化比例
}
}
结果截屏
image.png
可以看到我们获取到的屏幕宽度是411.4，高度是683.4，我的模拟器是10801920，所以从这个结果我们可以得到它的单位就是dp，也可以验证下1080=411.42.625，这里会有一点误差，因为我计算的宽其实是省略了很多小数的。
结论：我们获取的屏幕宽高、设置的控件宽高、字体大小都是设置的dp
对控件设置宽高
//todo 控件宽高设置
return <View>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
<View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
</View>
效果图
提示：从图上看得出一个容器在摆放子控件时默认是以列（column）方向排列的，而安卓是横向排列的
flex使用：
在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。
前提：组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。
//todo flex 使用
return<View style={{flex: 1}}>
<Text style={{width: 50, height: 50,backgroundColor: 'powderblue'}} >文本1</Text>
<Text style={{width: 50, height: 50, flex:1,backgroundColor: 'skyblue'}} >文本2</Text>
<Text style={{width: 50, flex:1, height: 50,backgroundColor: 'red'}} >文本3</Text>
<Text style={{ width: 50,flex:1, backgroundColor: 'steelblue'}} >文本4</Text>
<Text style={{flex:1, backgroundColor: 'olive'}} >文本5</Text>
<Text style={{flex:2, backgroundColor: 'green'}} >文本6</Text>
</View>
效果图
总结：
- 1、从文本1和文本2可以看出，加了
flex:1会在父容器指定的方向上按等比扩展，子控件指定的height失效 - 2、从文本2和文本3可以看出，flex所呈现的效果与所加的位置无关，至于父容器的item排列方向有关
- 3、从文本4和文本5可以看出，当父容器对item的排列方向是column时，如果item指定了宽度，那么flex只对column方向有效，如果item没有指定宽度，那么flex会对row方向起作用，同理当父容器指定item排列方向是row时也一样。
- 4、从文本5和文本6可以看出，多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大
喜欢请点赞，或是关注，后续将完善发布更多的文章，你的鼓励就是我的动力（程序员最大的动力莫过于同行的鼓励）
