Дизайн макета в родной реакции

Question

Я пытаюсь создать макет ниже в реагировать родной.

Я не могу нарисовать горизонтальную линию, как показано выше. Кое-как, как я нарисовал, но поле справа не применяется

Код

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

Какую модификацию я должен сделать?

Answer 1

вы можете изменить стиль width: "100%" на «flex: 1». Вы хотите, чтобы правильный вид занимал остальную часть ширины, тогда «flex: 1» означает, что остальная часть ширины принадлежит ему. У него есть вес. процент, который вы должны использовать в обоих компонентах. дополнительные советы по адаптеру пользовательского интерфейса вы можете прочитать в этой статье

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