React-native 之 position布局
发布时间:2020-12-15 07:25:11 所属栏目:百科 来源:网络整理
导读:参考原文:http://www.jianshu.com/p/3699a6e34e50 position布局 position:enum('absolute','relative')。先简单的看一下示例图 position:'relative' 相对布局。这个和html的position有很大的不同,他的相对布局不是相对于父容器,而是相对于兄弟节点。 posi
参考原文:http://www.jianshu.com/p/3699a6e34e50 position布局position:enum('absolute','relative')。先简单的看一下示例图
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React,{ Component } from 'react'; import { AppRegistry,StyleSheet,TextInput,TouchableOpacity,ScrollView,Text,View } from 'react-native'; let Dimensions = require('Dimensions'); let ScreenWidth = Dimensions.get('window').width; let ScreenHeight = Dimensions.get('window').height; export default class positionDemo extends Component { constructor(props) { super(props); this.state = {}; } render() { return ( <ScrollView> <View style={{ flex: 1 }}> <Text>FlexBox布局</Text> <View style={styles.container}> <View style={styles.box1} /> <View style={[styles.box2]} /> <View style={[styles.box3]} /> </View> <Text>position=relative,top:20</Text> <View style={styles.container}> <View style={styles.box1} /> <View style={[styles.box2,{ position: 'relative',top: 20 }]}></View> <View style={styles.box3} /> </View> <Text>position=absolute,{ position: 'absolute',top: 20 }]}></View> <View style={styles.box3} /> </View> </View> </ScrollView> ); } } const styles = { container: { height: 180,backgroundColor: '#CCCCCC',marginBottom: 10,},box1: { width: 50,height: 50,backgroundColor: '#FF0000' },box2: { width: 50,backgroundColor: '#00FF00' },box3: { width: 50,backgroundColor: '#0000FF' } }; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |