2017-09-07 80 views
0

我一直在嘗試使用多行增長textinput一段時間,並且現在在鍵盤在輸入時阻止文本的情況下查找我的應用程序文本輸入的新行。我已經嘗試過從基於KeyboardAwareScrollView的解決方案到ScrollView解決方案的解決方案,但是我試過的東西沒有任何工作。React Native:調整視圖高度時鍵盤塊多行textInput

我真的很感激,如果有人可以爲我提供一個適用於Android和iOS的解決方案。

我現在擁有的是與多一個TextInput視圖支撐

<View style={{ height: this.state.height, flex: 1 }}> 
    <TextInput 
    {...otherProps} 
    placeholder="Skriv här" 
    placeholderTextColor="rgba(0,0,0,0.3)" 
    blurOnSubmit={false} 
    multiline 
    onContentSizeChange={this._onContentSizeChange} 
    style={[styles.textInputStyle, { height: this.state.height }]} 
    /> 
</View> 

與_onContentSizeChange功能如下:與圖片所示

_onContentSizeChange = (event): void => { 
    const height = event.nativeEvent.contentSize.height; 
    this.setState({ height }); 
} 

問題: imgur album

回答

0

KeyboardAvoidingView似乎是你的解決方案。您可以設置視圖和鍵盤之間的距離,並根據輸入的高度進行計算。在文檔中,您可以找到所有屬性:https://facebook.github.io/react-native/docs/keyboardavoidingview.html

您也可以嘗試使用KeyboardAvoidingScrollView,然後當輸入足夠高時,您只需向下滾動屏幕即可。

下面是與鍵盤的很好的例子,一個真棒文章避免:https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580

希望它能幫助。

相關問題