时间戳

首页 > 解决方案 > React Native 中的布局设计

android - React Native 中的布局设计

问题描述

我正在尝试在本机反应中设计以下布局。

如上所示，我无法绘制水平线。我画的一些方法，但右边的边距没有被应用React Native 中的布局

代码

<View style={{ flexDirection: 'row' }}>
                    <Text style={styles.text}>
                        Search
                </Text>
                    <View style={styles.viewStyleForLine1}></View>
                </View>

风格

viewStyleForLine1: {
        borderWidth: 1,
        borderColor: '#cc0000',
        alignSelf: 'stretch',
        marginLeft: 5,
        marginRight: 5,
        width:"100%"
    },

更多关于内容居中的编辑

这是我的观点

<View style={{ flexDirection: 'row' }}>
            <Text style={styles.text}>
             Search</Text>
            <View style={styles.viewStyleForLine1}></View>
            </View>

风格

text: {
        marginTop: 16,
        fontSize: 30,
        fontWeight: 'bold',
        color: '#cc0000',
        marginLeft: 15
    },

    viewStyleForLine1: {
        borderBottomWidth: 1,
        borderColor: '#cc0000',
        marginLeft: 5,
        alignItems:"center",      
        marginRight: 15,
        alignSelf:"center",
        flex:1
    },

我应该做什么修改？

标签： androidreact-nativemobile

解决方案

您可以将样式更改width: "100%"为“flex:1”。您希望正确的视图占据其余的宽度，那么“flex:1”表示其余的宽度属于它。它有一个权重。您必须在两个组件中使用的百分比。有关 UI 适配器的更多提示，您可以阅读本文

viewStyleForLine1: {
        borderWidth: 1,
        borderColor: '#cc0000',
        alignSelf: 'stretch',
        marginLeft: 5,
        marginRight: 5,
        flex:1
    },

推荐阅读