React Native 之 Flex
2016-09-29 17:04
375 查看
组件的高度,宽度决定了在屏幕上的尺寸。React-Native中尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点。
import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class TestSize extends Component { render() { 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> ); } }; // 注册应用(registerComponent)后才能正确渲染 // 注意:只把应用作为一个整体注册一次,而不是每个组件/模块都注册 AppRegistry.registerComponent('
TestSize
', () =>
TestSize
); // 设置了具体的宽、高,那么在任何设备上都是同样的尺寸,不存在适配这么一说。 对应效果图如下: Flex 在组件样式中使用Flex 可以使其可以再可利用的空间内动态扩张或收缩,经常会看到flex:1 指定某个控件扩展以充满所有剩余空间。如果多个并列的子组件都是flex:1,这些子组件平分父容器中剩余空间 ,若这些并列子组件flex都不一样,那么他们会按照比例充满父容器剩余空间(例如3个子组件,flex分别是 2,4,5,那么分别占用父容器剩余空间的2/11, 4/11, 5/11) 前提:子组件能够充满父容器剩余空间必须父容器的尺寸不为 0 ,如果父容器既没有指定width、height,同时也没有设定flex:1,那么子组件将不会显示(即使子组件设置了flex)。 父组件默认设置flex:1(默认充满整个剩余空间)
import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class TestSize extends Component { render() { return (
<View style={{flex: 1}}> <View style={{flex: 1, backgroundColor: 'powderblue'}} /> <View style={{flex: 2, backgroundColor: 'skyblue'}} /> <View style={{flex: 3, backgroundColor: 'steelblue'}} /> </View>
); } }; AppRegistry.registerComponent('
TestSize
', () =>
TestSize
);
如下图: 如果设置父容器宽+高(例如width:50,height:200),如下图
相关文章推荐
- React Native开发重的坑
- Rreact Native 常见错误总结
- react-native 热更新(android)
- react-native开发系列 不错的博客
- ReactNative——打包发布
- react + iscroll5 实现完美 下拉刷新,上拉加载
- react native 学习笔记----封装Android的原生组件
- React Native 之 State(状态)
- React-Form表单数据获取
- 小白学react之restful api获取服务器数据实战
- React-Native学习--轮播图第三方组件-react-native-swiper
- React生成组件类
- React-Native打包发布
- React遍历标签数组
- React遍历数组
- React节点插入内容
- 深入浅出 React Native:使用 JavaScript 构建原生应用
- React-Native手势识别(曲线比较)
- React Native 之 PropTypes(属性)
- react入门(3)