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