如何避免鍵盤在Android上推送佈局反應原生

我面臨這個問題幾個月，我仍然無法解決它。我有一個文字輸入在視圖的底部，應該用軟鍵盤一下子敲擊一下。相反，整個佈局被推上去，你看不到它的上半部分。如何避免鍵盤在Android上推送佈局反應原生

我嘗試了許多不同的鍵盤間隔庫，但他們都只是推了TextInput甚至更高..

這裏是我的主要觀點：

<View 
    style={{ 
     flex: 1, 
     alignItems: 'stretch', 
     justifyContent: 'space-between', 
     overflow: 'hidden', 
     backgroundColor: Colors.darkBlue 
    }} 
    > 
    {/* Header */} 
    <View 
     style={{ 
     flexDirection: 'row', 
     alignItems: 'stretch', 
     height: 300 
     }}> 
     {/* Question bubble */} 
     { (this.state.question && this.state.question !== '') ? (
      <TouchableOpacity 
      style={{ 
       flex: 1, 
       flexDirection: 'row', 
       backgroundColor: 'transparent', 
       alignItems: 'stretch', 
       paddingRight: QUESTION_SPEAKER_RADIUS 
       }} 
      > 
      <View 
       style={{ 
        flex: 1, 
        alignSelf: 'stretch', 
        alignItems: 'center', 
        justifyContent: 'center', 
        backgroundColor: 'white', 
       }} 
      > 
       <Text> 
       {this.state.question} 
       </Text> 
      </View> 
      </TouchableOpacity> 
     ) : null 
     } 
    </View> 
    <KeyboardInput 
     style={{}} 
     onClose={() => this.setState({ displayMode: DISPLAY_MODES.homeEmpty })} 
     onConfirm={(text) => this.onConfirmText(text) } 
    /> 
    </View>

這裏是鍵盤輸入：

<View 
     style={{ 
     alignSelf: 'stretch', 
     flexDirection: 'row', 
     alignItems: 'center', 
     justifyContent: 'flex-end', 
     backgroundColor: Colors.pink, 
     borderColor: Colors.lime, 
     borderTopWidth: 4, 
     padding: 6, 
     }}> 
     <View 
     style={{ 
      flex: 1, 
      borderRadius: 6, 
      padding: 0, 
      backgroundColor: Colors.white, 
      alignItems: 'stretch', 
     }} 
     > 
     <TextInput 
      placeholder={Strings.child_keyboard_placeholder} 
      value={this.state.messageTextInput} 
      onChangeText={(text) => this.setState({messageTextInput: text})} 
      style={{ 
      height: 50, 
      marginLeft: 10, 
      marginRight: CONFIRM_BUTTON_SIZE/2 
      }} 
      underlineColorAndroid='transparent' 
      numberOfLines={2} 
      maxLength={70} 
      autoCorrect={false} 
      returnKeyType='next' 
     /> 
     </View> 
    </View>

在Android上使用RN 0.35。

來源

2017-03-16 Alex Pavtoulov

使用RN KeyboardAvoidingView無法解決此問題。它只是推的TextInput高於鍵盤 –

我有清單中的android：windowSoftInputMode =「adjustResize」，但它不起作用。 –

嗯，感謝React Native FB組，我得到了一個解決方案：狀態欄必須不是'隱藏'才能使其工作。很奇怪的錯誤..

來源

2017-03-16 19:08:47

一個問題已打開 - https://github.com/facebook/react- native/issues/12980 –

的這裏的問題是，你必須：

windowSoftInputMode="adjustResize";

將其更改爲：

windowSoftInputMode="adjustPan"

來源

2017-05-13 10:04:07

adjustPan具有錯誤的效果，我希望窗口在鍵盤顯示時調整大小，以便視圖不會被推出屏幕。 –

這裏是任何人冒險進入這個領域了幾個致命的教程：

我會非常密切地在HOC解決自己不久這個項目，但是現在，我只需要這個問題了，這windowSoftInputMode="adjustPan"爲我做的。

與此同時，鍵盤剛剛出現頂部的看法。使用默認的調整大小選項，每個組件都使用flex: 1並對齊/對齊center，以便視圖得到各種損壞。考慮到我的觀點只有一個輸入，並且是8視圖，8步驟過程的一部分，對於我來說，這對我來說工作太多了，因爲鍵盤甚至沒有通過adjustPan覆蓋輸入的頂部。

但是，在我看來，最佳的解決方案是使用<KeyboardAvoidingView />結合添加和刪除事件監聽器和交換組件styles與一些狀態切換。這是通過鍵盤狀態在Android和iOS上完全控制UI的唯一方法。

來源

2017-10-17 00:05:12 agm1984

如何避免鍵盤在Android上推送佈局反應原生

回答

相關問題