React Native 界面布局

View布局

水平垂直居中

    render(){
           return (
            <View style={{height:100,backgroundColor:'#333333',alignItems:'center',justifyContent:'center'}}>
                <View style={{backgroundColor:'#fefefe',width:30,height:30,borderRadius:15}} />             
            </View>
            );
      }

左右固定,中间flex

    render(){
           return (
            <View style={styles.flexContainer}>
                <View style={styles.cellfixed}>
                    <Text style={styles.welcome}>fixed</Text>
                </View>
                <View style={styles.cell}>
                    <Text style={styles.welcome}>flex</Text>
                </View>
                <View style={styles.cellfixed}>
                    <Text style={styles.welcome}>fixed</Text>
                </View>
            </View>
            );
      }


const styles = StyleSheet.create({
  flexContainer:{
    flexDirection:'row'
  } ,
  welcome:{
    fontSize:20,
    textAlign:'center',
    margin:10
  },
  cellfixed:{
    height:50,
    width:80,
    backgroundColor:'#fefefe'
  }
});

绝对定位和相对定位

    render(){
           return (
            <View style={{flex:1,height:100,backgroundColor:'#333333'}}>
            <View style={[styles.circle1,{position:'relative',top:50,left:50}]}></View>
                <View style={[styles.circle2,{position:'relative',top:50,left:50,marginLeft:50}]}></View>
            </View>
            );
      }

const styles = StyleSheet.create({
  circle1:{
    backgroundColor:'green',
    borderRadius:10,
    width:20,
    height:20
  },
    circle2:{
    backgroundColor:'#fe0000',
    borderRadius:10,
    width:20,
    height:20
  }
});
定位.png

绿色的原点距离左边50,红色距离左边50+marginLeft偏移50,即100,

图片布局

1.cover

    render(){
           return (
            <View style={{flex:1,justifyContent:'center'}}>
                <Image style={{height:100,resizeMode:Image.resizeMode.cover}} source={{uri:'http://f.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=67440d2e0ed162d985bb6a1824ef85da/5366d0160924ab18f267a2dd31fae6cd7a890be2.jpg'}}/>
            </View>
            );
      }
cover效果.png

2.stretch

    render(){
           return (
            <View style={{flex:1,justifyContent:'center'}}>
                <Image style={{height:100,resizeMode:Image.resizeMode.stretch}} source={{uri:'http://f.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=67440d2e0ed162d985bb6a1824ef85da/5366d0160924ab18f267a2dd31fae6cd7a890be2.jpg'}}/>
            </View>
            );
      }
stretch效果.png

3.contain

    render(){
           return (
            <View style={{flex:1,justifyContent:'center'}}>
                <Image style={{height:100,resizeMode:Image.resizeMode.contain}} source={{uri:'http://f.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=67440d2e0ed162d985bb6a1824ef85da/5366d0160924ab18f267a2dd31fae6cd7a890be2.jpg'}}/>
            </View>
            );
      }
contain效果.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,821评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,350评论 0 11
  • 本文出自《React Native学习笔记》系列文章。 一款好的APP离不了一个漂亮的布局,本文章将向大家分享Re...
    CrazyCodeBoy阅读 37,540评论 3 278
  • 一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox。 在Re...
    鹿守心畔光阅读 642评论 0 0
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 3,194评论 0 59