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

Bertha 。 2022-05-23 05:55 239阅读 0赞

#  #

# 创建样式 #

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" /* 文字修饰线条的颜色 */ }

# 图解布局： #

![70][]![70 1][]

![70 2][]![400][]

![70 3][]![70 4][]

# 第一个栗子 #

##### 图： #####

![70 5][]

##### 代码： #####

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,
        }
    });

# 第二个栗子 #

##### 图： #####

![70 6][]

##### 代码： #####

[70]: https://img-blog.csdn.net/20180603164909245?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220523/4b49b3d5a39c4d87a085ccff1f53b854.png
[70 2]: https://img-blog.csdn.net/20180603164925384?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[400]: /images/20220523/855e4c7ffd21444eafcdf11ec02b224b.png
[70 3]: https://img-blog.csdn.net/20180603165047379?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: /images/20220523/e106afb4f5a84206870edfbe547030ab.png
[70 5]: /images/20220523/411050e7b5544417b4e14ecf83c37588.png
[70 6]: /images/20220523/91aeb063324d43f2be7cf698b26be78e.png