React-Native之（小白计划四）Flexbox简单布局

创建样式

const styles = StyleSheet.create({
    container: {
        backgroundColor: "#eae7ff",
        flex: 1
    }
});

应用样式

render() {
        return (
            <View style={styles.container}></View>
        );
    }

样式详解

• 如果给最外面的view设置样式：

  container: {
      backgroundColor: "#eae7ff",
      flex: 1,
      marginTop: 20;
  }

  其中flex:1会撑满全部手机界面，marginTop:20会留出上面状态栏的位置

• 常用样式

  container: {
      backgroundColor: "#eae7ff", /*设置背景色*/
      borderColor:"red", /* 设置边框颜色 */
      borderWidth:1, /* 设置边框宽度 */  
      borderRadius:10, /* 设置边框圆角 */
      shadowColor: "#ccc", /* 阴影颜色 */
      shadowOpacity: 0.5 /* 设置阴影透明度 */
      shadowRadius: 2, /* 设置阴影扩散程度 */
      shadowOffset:{
          height:1, /* 设置阴影偏倚：垂直方向偏移量 */
          width:1  /* 设置阴影偏倚：水平方向偏移量 */
      }
  },

• 文字样式

  title: {
      fontSize: 26, /* 文字大小 */
      color: "red", /* 文字颜色 */
      textAlign: "center", /* 文字对齐方式：auto,left,right,center,justify */
      fontSyle: "italic", /* 文字样式 */
      letterSpacing: 2, /* 文字间距 */
      lineHeight: 20, /* 文字行高 */
      fontFamily: "Helvetica Neue", /* 文字字体 */
      fontWeight: "300", /* 文字粗细 : 300 - 900, bold */
      textDecorationLine: "underline", /* 文字修饰：下划线underline，删除线line-through */
      textDecorationStyle: "dashed", /* 文字修饰的线条样式：solid, double, dotted, dashed  */
      textDecorationColor: "red" /* 文字修饰线条的颜色 */
  }

图解布局：

第一个栗子

图：

代码：

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    Image,
    View,
    FlatList,
    TouchableOpacity
} from 'react-native';



export default class Cinemas extends Component {
    static navigationOptions = {
        title: '我的电影',
    };
    render() {
        const {state,goBack}=this.props.navigation;
        return (
            <View  style={styles.parent}>

                    <Text style={[styles.childfirst,styles.margin]}> View1 </Text>
                    <Text style={[styles.childsecond,styles.margin]}> View2 </Text>
                    <Text style={[styles.childthird,styles.margin]}> View3 </Text>
                    <Text style={styles.childthird}> View3 </Text>
                    <Text style={styles.childthird}> View3 </Text>
                    <Text style={styles.childthird}> View3 </Text>

            </View>
        );
    }
}

const styles = StyleSheet.create({

    parent:{
        flex:1,
        flexDirection:'row',
        opacity:0.4,

        flexWrap:'wrap',//换行
        justifyContent:'space-around',
    },
    childfirst:{
        backgroundColor:'#676677',
        width:100,
        height:100,
        fontSize:13,

    },
    childsecond:{
        backgroundColor:'#9fbb74',
        width:100,
        height:100,
        fontSize:13,

    },
    childthird:{
        backgroundColor:'#bb7478',
        width:100,
        height:100,
        fontSize:13,

    },
    margin:{

        marginBottom:10,
    }
});

第二个栗子

图：

代码：

 

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    Image,
    View,
    FlatList,
    TouchableOpacity
} from 'react-native';



export default class Cinemas extends Component {
    static navigationOptions = {
        title: '影院',
    };
    render() {
        const {state,goBack}=this.props.navigation;
        return (
            <View  style={styles.parent}>
                <Text style={styles.view1}>我的影院1</Text>
                <Text style={styles.view2}>我的影院2</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    parent:{
        flex:1,
    },
    view1:{
        backgroundColor:'#676677',
        height:100,
        margin:10,
        borderRadius:10,

        elevation:5,//漂浮的效果
        shadowColor:'red',

    },
    view2:{
        backgroundColor:'#9fbb74',
        height:100,
        marginRight:10,
        marginLeft:10,
        borderRadius:10,

        elevation:5,

    }


});

扫描二维码关注公众号，回复： 1533659 查看本文章