多行可調節可重複使用的最小高度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組件

回答

相關問題