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

查看所有标签

猜你喜欢:

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

码农书籍
软利器

软利器

保罗·莱文森 / 何道宽 / 复旦大学出版社 / 2011-5 / 35.00元

《软利器:信息革命的自然历史与未来》内容简介：何谓“软利器”？一种轻盈、透明、无质无形、难以把握的力量，由信息和物理载体构成，这就是媒介。了解媒介的属性和演化规律的人，常占尽优势：反之则身处险境。是不是有些危言耸听？ 如果你看过保罗•莱文森的这本《软利器：信息革命的自然历史与未来》，或许就会深信不疑。在书中，莱文森如同一位经验丰富的航海家，带领你穿越媒介时空——你将邂逅古埃及的法老、古希腊的......一起来看看 《软利器》 这本书的介绍吧!

码农工具
URL 编码/解码
URL 编码/解码

URL 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

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