Question

我正在努力利用TextInput的高度调整，特别是声明最小高度。

我有一个Parent组件，其render方法由多个TextInput组成，每个TextInput都如下所示：

            <View>
                <AdjustableInput
                    label='Text'
                    maxLength={1000}
                    multiline
                    onChangeText={this.onInputChange.bind(this)}
                    placeholder='Type some text'
                    onContentSizeChange={(e) => 
                            this.setState({ lineHeight: e.nativeEvent.contentSize.height })}
                    style={{ lineHeight: this.state.lineHeight }}
                    viewStyle={{ height: this.state.lineHeight }}
                    value={this.state.text}
                />
            </View>

AdjustableInput可重用组件如下所示：

const AdjustableInput = ({ label, maxLength, multiline, onChangeText, placeholder, secureTextEntry, style, value, viewStyle }) => {
const { containerStyle, inputStyle, labelStyle } = styles;
return (
    <View style={[containerStyle, viewStyle]}>
        <Text style={labelStyle}>{label}</Text>
        <TextInput 
        autoCorrect={false}
        maxLength={maxLength || 25}
        multiline={multiline || false}
        onChangeText={onChangeText}
        placeholder={placeholder}
        placeholderTextColor='#C7C7CD'
        secureTextEntry={secureTextEntry}
        style={[inputStyle, style]}
        value={value}
        />
    </View>
    );
};

const styles = {
    containerStyle: {
        alignItems: 'center',
        flex: 1,
        flexDirection: 'row',
        height: 40
    },
    inputStyle: {
        alignSelf: 'center',
        color: '#000',
        flex: 2,
        fontSize: 18,
        lineHeight: 23,
        paddingLeft: 5,
        paddingRight: 5,
    },
    labelStyle: {
        flex: 1,
        fontSize: 18,
        paddingLeft: 20,
    }
};

我想要达到的目标是为TextInput和View分别设置默认的最小高度（分别为23和40），这将调整为TextInput中的文本量并更正高度基于此的财产。

通过实现 onContentSizeChange 道具来实现调整，但TextInput和View中的默认大小仍为23，如前所述应为23和40。

什么行不通： - 将数学运算应用于this.state.lineHeight prop除以23并将多打40乘以（由于e.nativeEvent的工作方式，this.state.lineHeight始终未定义） - 省略parent组件中viewHeight的声明，以依赖于在AdjustableInput组件中声明的固定高度。

Answer 1

解决方案非常简单。将minHeight属性添加到专用组件。

多线可调节可重复使用的React-Native TextInput组件的最小高度

1 个答案: