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涵盖上一次输入的文字

回答

相关问题