ReactNative学习笔记(二)之flexbox

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

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

接上一篇 ReactNative学习笔记(二)之常用样式

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

看一眼效果

ReactNative学习笔记(二)之flexbox

默认这三个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以后再观察一下

ReactNative学习笔记(二)之flexbox

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

flex-end效果:

ReactNative学习笔记(二)之flexbox

space-between效果:

ReactNative学习笔记(二)之flexbox

space-around效果:

ReactNative学习笔记(二)之flexbox

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

alignItems

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

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

效果如下

ReactNative学习笔记(二)之flexbox

还可已设置成 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,
    }
});

效果如图:

ReactNative学习笔记(二)之flexbox

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

效果如下:

ReactNative学习笔记(二)之flexbox

如果想让某个某个项目多占一点地方, 可以去单独设置一下这个项目的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,
    }
});

效果如下:

ReactNative学习笔记(二)之flexbox

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

效果如下:

ReactNative学习笔记(二)之flexbox

技巧

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

比如这里我在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》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

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

码农书籍
创业就是要细分垄断

创业就是要细分垄断

李开复、汪华、傅盛 / 文化发展出版社 / 2017-5-1 / CNY 45.00

对各方面资源极为有限的创业公司而言，想在激烈的市场竞争中站立下来的第一步是：成为细分市场的垄断者。不管是资本还是尖端人才，追逐的永远是行业里尖端的企业，第二名毫无意义。 首先，要精准定位潜在市场。这个市场的需求仍没有被满足，并且潜力巨大。其次，抓住时代和行业的红利，通过高速增长实现“小垄断”，抢滩登陆。最后，在细分领域里建立起自己的竞争壁垒，应对巨头和竞争对手的复制，去扩展更大的市场，从而扩......一起来看看 《创业就是要细分垄断》 这本书的介绍吧!

码农工具
HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2025 码农网 粤ICP备17054400号-3