ReactNative学习笔记(二)之flexbox

栏目: CSS · 发布时间: 7年前

内容简介：接上一篇首先改写App这个类注意到第二级的View标签的style属性的大括号里面是一个数组, 这样就可以应用多个样式.

justiyfContent

首先改写App这个类

export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <View style={[styles.item, styles.itemOne]}>
                    <Text style={styles.itemText}>1</Text>
                </View>
                <View style={[styles.item, styles.itemTwo]}>
                    <Text style={styles.itemText}>2</Text>
                </View>
                <View style={[styles.item, styles.itemThree]}>
                    <Text style={styles.itemText}>3</Text>
                </View>
            </View>
        );
    }
}

注意到第二级的View标签的style属性的大括号里面是一个数组, 这样就可以应用多个样式.

然后再去定义这几个样式

let styles = StyleSheet.create({
    item: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#6435c9',
        margin: 6,
    },
    itemOne: {},
    itemTwo: {},
    itemThree: {},
    itemText: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#6435c9',
        padding: 30,
    },
    container: {
        backgroundColor: '#eae7ff',
        flex: 1, // 占满全屏
        paddingTop: 23,
    }
});

看一眼效果

默认这三个View会堆叠到一块儿, 然后靠着屏幕的上面去显示

现在我们修改一下style

let styles = StyleSheet.create({
    item: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#6435c9',
        margin: 6,
    },
    itemOne: {},
    itemTwo: {},
    itemThree: {},
    itemText: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#6435c9',
        padding: 30,
    },
    container: {
        justifyContent: 'center',
        backgroundColor: '#eae7ff',
        flex: 1, // 占满全屏
        paddingTop: 23,
    }
});

注意到我们对最外面的View应用的样式是container, 现在我们修改这个container中的属性, 加入一行 justifyContent: 'center' , justifyContent决定子元素是应该在头部，中部，尾部还是平均分布 , 默认是 flex-start , 就是上面那个样子, 现在我们把它改成center以后再观察一下

可以看到子元素们都居中显示了.

flex-end效果:

space-between效果:

space-around效果:

注意到space-between是将子元素的首尾都靠着父元素的首位, 然后让这几个子元素平均排列, space-around是将父元素的空间平均分配, 然后每个子元素都放在被分配的空间的中间位置.

alignItems

我们再注意到, 这几个子元素默认的宽度就是屏幕的宽度, 这是因为他们的包装容器alignItems属性的值默认是stretch, 现在我们修改一下, 将alignItems的属性改成flex-start

container: {
        justifyContent: 'space-around',
        alignItems: 'flex-start',
        backgroundColor: '#eae7ff',
        flex: 1, // 占满全屏
        paddingTop: 23,
    }

效果如下

还可已设置成 center 、 flex-end

alignSelf

alignSelf可以控制子元素与包装容器的对齐方式.

我们也可以单独的去控制每个子元素的对齐方式, 比如我们可以找到itemOne、itemTwo、itemThree的样式, 设置如下:

let styles = StyleSheet.create({
    item: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#6435c9',
        margin: 6,
    },
    itemOne: {
        alignSelf: 'flex-start',
    },
    itemTwo: {
        alignSelf: 'center',
    },
    itemThree: {
        alignSelf: 'flex-end',
    },
    itemText: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#6435c9',
        padding: 30,
    },
    container: {
        justifyContent: 'space-around',
        alignItems: 'flex-start',
        backgroundColor: '#eae7ff',
        flex: 1, // 占满全屏
        paddingTop: 23,
    }
});

效果如图:

flex

现在我们想让每个子元素都占总空间的三分之一, 那就在注释掉其他属性, 然后再item里面设置flex属性为1, 代码如下:

let styles = StyleSheet.create({
    item: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#6435c9',
        margin: 6,
        flex: 1,
    },
    itemOne: {
        // alignSelf: 'flex-start',
    },
    itemTwo: {
        // alignSelf: 'center',
    },
    itemThree: {
        // alignSelf: 'flex-end',
    },
    itemText: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#6435c9',
        padding: 30,
    },
    container: {
        // justifyContent: 'space- around',
        // alignItems: 'flex-start',
        backgroundColor: '#eae7ff',
        flex: 1, // 占满全屏
        paddingTop: 23,
    }
});

效果如下:

如果想让某个某个项目多占一点地方, 可以去单独设置一下这个项目的flex属性, 比如我们设置项目三的flex属性为2

let styles = StyleSheet.create({
    item: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#6435c9',
        margin: 6,
        flex: 1,
    },
    itemOne: {
        // alignSelf: 'flex-start',
    },
    itemTwo: {
        // alignSelf: 'center',
    },
    itemThree: {
        // alignSelf: 'flex-end',
        flex: 2,
    },
    itemText: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#6435c9',
        padding: 30,
    },
    container: {
        // justifyContent: 'space- around',
        // alignItems: 'flex-start',
        backgroundColor: '#eae7ff',
        flex: 1, // 占满全屏
        paddingTop: 23,
    }
});

效果如下:

flexDirection

现在这几个项目是在同一列里面从上到下显示的, 这是因为他们的包装容器的flexDirection的值默认是column, 也就是所有子元素都在同一列中, 那就是从上到小排列.现在我们把这个属性的值改为row, 让所有子元素都在同一行, 从左到右排列

let styles = StyleSheet.create({
    item: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#6435c9',
        margin: 6,
        flex: 1,
    },
    itemOne: {
        // alignSelf: 'flex-start',
    },
    itemTwo: {
        // alignSelf: 'center',
    },
    itemThree: {
        // alignSelf: 'flex-end',
        flex: 2,
    },
    itemText: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#6435c9',
        padding: 30,
    },
    container: {
        // justifyContent: 'space- around',
        // alignItems: 'flex-start',
        flexDirection: 'row',
        backgroundColor: '#eae7ff',
        flex: 1, // 占满全屏
        paddingTop: 23,
    }
});

效果如下:

技巧

如果你不知道某个属性有哪些值可以设置, 你可以先随便写一个错的值

比如这里我在alignSelf写了一个错的值

 let styles = StyleSheet.create({
    item: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#6435c9',
        margin: 6,
        flex: 1,
    },
    itemOne: {
        alignSelf: 'ddd',
    },
    itemTwo: {
        // alignSelf: 'center',
    },
    itemThree: {
        // alignSelf: 'flex-end',
        // flex: 2,
    },
    itemText: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#6435c9',
        padding: 30,
    },
    container: {
        // justifyContent: 'space- around',
        // alignItems: 'flex-start',
        // flexDirection: 'row',
        backgroundColor: '#eae7ff',
        flex: 1, // 占满全屏
        paddingTop: 23,
    }
});

ReactNative学习笔记(二)之flexbox 接着刷新reload的时候就会报错, 报错信息里说, alignSelf只能是 auto 、 flex-start 、 flex-end 、 center 、 stretch 、 baseline 中的某一种

以上所述就是小编给大家介绍的《ReactNative学习笔记(二)之flexbox》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

区块链核心算法解析

【瑞士】Roger Wattenhofer（罗格.瓦唐霍费尔） / 陈晋川、薛云志、林强、祝庆 / 电子工业出版社 / 2017-8 / 59.00

《区块链核心算法解析》介绍了构建容错的分布式系统所需的基础技术，以及一系列允许容错的协议和算法，并且讨论一些实现了这些技术的实际系统。《区块链核心算法解析》中的主要概念将独立成章。每一章都以一个小故事开始，从而引出该章节的内容。算法、协议和定义都将以形式化的方式描述，以便于读者理解如何实现。部分结论会在定理中予以证明，这样读者就可以明白为什么这些概念或算法是正确的，并且理解它们可以确保实现......一起来看看《区块链核心算法解析》这本书的介绍吧!

码农工具