Один компонент слева с определенной шириной, а другой справа, занимая оставшееся горизонтальное пространство

Question

Я пытаюсь создать компонент, который имеет два TextInput:

• Номер улицы
• Название улицы

Я хочупервый имеет ширину 35, а второй заполняет оставшееся пространство по горизонтали.

Как бы вы это сделали?

Мой код:

import React from 'react';
import {StyleSheet, View} from 'react-native';
import FormInput from "./FormInput"

export default class NoStreetInput extends React.Component {
    render() {
        return(
            <View style={{flex:1, flexDirection: 'row'}}>
                <FormInput style={{container: {width: 35}}} placeholder="N°" defaultValue="4"/>
                <FormInput style={{container: {flexGrow: 1}}} placeholder="Addresse" defaultValue="Chemin Du Moulin" />
            </View>
        );
    }
}

Мой компонент FormInput (на всякий случай):

<View style={styles.container}>
            <TextInput
                style={styles.textInput}
                autoCorrect={false}
                defaultValue={this.props.defaultValue}
                placeholder={this.props.placeholder}
                secureTextEntry={secureTextEntry}
                password={password}
                keyboardType={keyboardType}
            />
</View>

Answer 1

На самом деле я узнал, чего не хватало.Я начал с React Native и подумал, что смогу получить доступ к свойствам стиля своих детей моего пользовательского компонента без добавления реквизита.Я забыл создать реквизит для своего компонента, чтобы он мог воспринимать стиль снаружи.

Я наконец-то сделал это так:

style = {{..}} теперь является реквизитом в моем пользовательском компоненте (см. 2-й код)

export default class NoStreetInput extends React.Component {
    render() {
        return(
            <View style={{flex:1, flexDirection: 'row'}}>
                <FormInput style={{flex:0, width:35}} placeholder={this.props.placeholderNo}
                           defaultValue={this.props.defaultValueNo} width="35" keyboardType="number-pad" upperLabel="No"/>
                <FormInput style={{flex:1}} placeholder={this.props.placeholderStree}
                           defaultValue={this.props.defaultValueStreet} upperLabel="Rue" />
            </View>
        );
    }
}

MyПользовательский компонент (он немного отличается от предыдущего, но логика та же):

<View style={[styles.container, this.props.style]}>
            <Text style={[styles.upperLabel, customStyle]}>{upperLabel}</Text>
            <TextInput
                style={[styles.textInput, this.props.textInputStyle]}
                autoCorrect={false}
                defaultValue={this.props.defaultValue}
                value={text}
                placeholder={this.props.placeholder}
                secureTextEntry={secureTextEntry}
                password={password}
                keyboardType={keyboardType}
                maxLength={maxLength}
                onChangeText={this.handleChangeText}
                onSubmitEditing={this.handleSubmitEditing}
            />
</View>

style = {[styles.textInput, this.props.textInputStyle]} позволяет мне использовать стиль по умолчанию для моегокомпонент, который может быть переопределен this.props.textInputStyle:)

Answer 2

Для этого вам просто нужно, чтобы ширина одного TextInput была равна 35 (что вы и сделали), а у другого TextInput с атрибутом flex установлено значение 1:

* 1005.*

(очевидно, ваш стиль должен храниться внутри таблицы стилей, но вы понимаете, в чем дело)

Вот рабочий пример