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

我正在努力利用我的TextInput的高度调整，特别是声明最小高度。多行可调节可重复使用的最小高度React-Native TextInput组件

我有一个父组件，它的渲染方法由多个TextInputs的每一个看起来是这样的：

  <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和视图保持23，当它应该是23和40前面提到的。

什么不工作： - 应用数学运算来this.state.lineHeight由23 multyplying（除以40，因为this.state.lineHeight总是不确定的支撑，由于道路e.nativeEvent作品） - 忽略父组件中viewHeight的声明以依赖固定高度，在AdjustableInput组件中声明。

来源

2017-10-04 Eduard

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

来源

2017-10-04 14:43:42 Eduard

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

回答

相关问题