多行可調可重用React-Native TextInput組件的最小高度

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中的文本量，並根據此值校正height屬性。

調整是通過實現onContentSizeChange屬性 實現的，但是TextInput和View的默認大小均保持為23， 如前所述 ，默認大小應為23和40。

無效的方法： -將數學運算應用到this.state.lineHeight道具上，除以23，乘以40（由於e.nativeEvent的工作方式始終未定義this.state.lineHeight）-省略了viewHeight的聲明在Parent組件中依賴於AdjustableInput組件中聲明的固定高度。

Answer 1

解決方案非常簡單。 將minHeight屬性添加到專用組件。