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

要执行此操作，您只需要将一个TextInput的宽度设置为35（您所做的），将另一个TextInput的{{1}}属性设置为1 ：

flex

（显然，您的样式应该保留在StyleSheet中，但是您明白了）

Here's a working example

Answer 2

实际上，我发现了缺少的东西。我从React Native开始，我认为我可以在不添加道具的情况下访问自定义组件的子样式属性。我忘了为我的组件创建道具，以便它可以采用外部样式。

我终于做到了：

style = {{..}}现在是我的自定义组件中的道具（请参见第二代码）

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

我的自定义组件（与以前有所不同，但逻辑相同）：

<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覆盖：）

左侧的一个组件具有确定的宽度，右侧的另一个组件占用了其余的水平空间

2 个答案: