React Native KeyboardAvoidingView涵蓋上一次輸入的文字

我使用React Native的Keyboard Avoiding View，其行爲設置爲填充（在Android上測試）。React Native KeyboardAvoidingView涵蓋上一次輸入的文字

我的屏幕上有多個TextInputs。當我點擊最終的TextInput時，鍵盤覆蓋它。由於從KeyboardAvoidingView添加了填充，因此我現在可以向下滾動，但它會自動滾動焦點，是理想選擇。

<Content> 
    <KeyboardAvoidingView behavior='padding'> 
    <TextInput placeholder='Example 1' /> 
    <TextInput placeholder='Example 2' /> 
    <TextInput placeholder='Example 3' /> 
    <TextInput placeholder='Example 4' /> 
    <TextInput placeholder='Example 5' /> 
    <TextInput placeholder='Example 6' /> 
    <TextInput placeholder='Example 7' /> 
    </KeyboardAvoidingView> 
</Content>

來源

2017-05-08 Molly Harper

一個選項（如果<Content />是ScrollView）是簡單地調用this.scrollView.scrollToEnd()應用戶輕按最終通過鍵盤被「覆蓋」的輸入。這將始終強制輸入顯示在鍵盤上方。

來源

2017-05-08 19:39:54 Maxwelll

謝謝，@Maxwelll。我對此沒有任何運氣。你能舉一個例子嗎？ –

要添加到@Maxwell的答案，有時您可能需要滾動進一步比滾動視圖的結束進一步查看組件，因爲添加的填充不是鍵盤的整個高度。下面的完整示例使用scrollTo（）和y偏移作爲文本輸入的高度。

import React, { Component } from 'react' 
import { 
    KeyboardAvoidingView, 
    ScrollView, 
    View, 
    TextInput 
} from 'react-native' 


export default class Test extends Component { 
    render() { 
     return (
      <ScrollView style = {{flex:1, backgroundColor: 'white'}} ref = 'scroll'> 
       <KeyboardAvoidingView behavior='position' style = {{backgroundColor: 'white', flex: 1}}> 
        <View style = {{height: 400}}/> 
        <TextInput style = {{height: 60}} placeholder='Example 1' /> 
        <TextInput style = {{height: 60}} placeholder='Example 2' /> 
        <TextInput style = {{height: 60}} placeholder='Example 3' /> 
        <TextInput style = {{height: 60}} placeholder='Example 4' onFocus = {() => this.refs['scroll'].scrollTo({y: 60})}/> 
       </KeyboardAvoidingView> 
      </ScrollView> 
     ) 
    } 
}

來源

2017-05-09 08:21:58

謝謝@理查德米倫。我試過這個，但是它的功能似乎不同，取決於我在屏幕上的位置。 –

謝謝你讓我知道我應該把scrollview放在keyboardAvoidingView的外層。 – elin

有道具叫做keyboardVerticalOffset可以傳遞到將改變KeyboardAvoidingView多少鍵盤移動通過爲textInput。樣品我的代碼：

const keyboardVerticalOffset = Platform.OS === 'ios' ? 40 : 0 

    return (
     <KeyboardAvoidingView behavior='position' keyboardVerticalOffset={keyboardVerticalOffset}> 
     <ListView .../> 
     <KeyboardAvoidingView/> 
    )

來源

2018-01-02 22:54:43 farmcommand2

根據平臺，Android或IOS實現，可以改變一點點。我就是這樣做的。

添加機器人：windowSoftInputMode = 「adjustResize」在AndroidManifest.xml中，

<activity 
    android:name=".MainActivity" 
    android:launchMode="singleTask" 
    android:label="@string/app_name" 
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize" 
    android:windowSoftInputMode="adjustResize"> 

</activity>

在容器中

<KeyboardAvoidingView 
     behavior={Platform.OS === "ios" ? "padding" : null} 
     keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}> 
     <ScrollView> 
     {...} 
     </ScrollView> 
    </KeyboardAvoidingView>

keyboardVerticalOffset告訴多大的鍵盤移動通過爲textInput。

來源

2018-02-19 07:00:47

React Native KeyboardAvoidingView涵蓋上一次輸入的文字

回答

相關問題