React native React Native-如果ScrollView不在屏幕顶部，键盘避免不工作

当我点击

TextInput

时，它会向上滚动，但会停在下方的位置，该位置应该与X相同，这意味着它仍然隐藏在键盘下

---

实际上，问题不在于键盘AvoidingView，因为它在没有使用的情况下也会发生

<View>
    <View style = {{height : X}}></View>
    <ScrollView>
        <KeyboardAvoidingView>
            <View style = {{height : 350}}></View>
            <TextInput/>
            <View style = {{height : 500}}></View>
        </KeyboardAvoidingView>
    </ScrollView>
</View>

容器：{
弹性：1，
对齐项目：“居中”，
}

这是键盘课

<KeyboardAvoiding behavior={'padding'} keyboardVerticalOffset={64} style={styles.container}>
        <View style={styles.container}>
          <ScrollView keyboardShouldPersistTaps="always">
            <View style = {{height : 350}}></View>
            <TextInput/>
            <View style = {{height : 500}}></View>
          </ScrollView>
        </View>
      </KeyboardAvoiding>

container: {
    flex: 1,
    alignItems: 'center',
  }

从“React”导入React
从“react native”导入{Platform，KeyboardAvoidingView作为react NativeKeyboardAvoidingView}
类KeyboardAvoidgView扩展了React.Component{
render（）{
如果（Platform.OS==='ios'）{
返回(
{this.props.children}
)
}
归还这个。道具。孩子们
}
}
键盘AvoidingView.propTypes={
子项：React.PropTypes.element，
}
module.exports=键盘AvoidingView

希望这有帮助。

render（）{
import React from 'react'
import { Platform, KeyboardAvoidingView as ReactNativeKeyboardAvoidingView } from 'react-native'

class KeyboardAvoidingView extends React.Component {
  render() {
    if (Platform.OS === 'ios') {
      return (
        <ReactNativeKeyboardAvoidingView behavior={'padding'} {...this.props}>
          {this.props.children}
        </ReactNativeKeyboardAvoidingView>
      )
    }

    return this.props.children
  }
}

KeyboardAvoidingView.propTypes = {
  children: React.PropTypes.element,
}

module.exports = KeyboardAvoidingView

var a=[]；
对于（var i=1；i<100；i++）a.push（i）；
返回(
this.refs.scroll.scrollTo（{x:0，y:0，动画：true}）}/>
{a.map（（项目，索引）=>）{
this.refs.scroll.scrollTo（{x:0，y:this.y[index]，动画：true}）；
}}
onLayout={event=>{
this.y[index]=event.nativeEvent.layout.y；
}}
/>))}
);
}

使用此解决方案，存在两个缺点，这会引发其他需要解决的问题

• 不适用于

  TextInput

  位于

  FlatList

  或可能间接包含

  TextInput

  的某些组件内的情况。在这种情况下，

  event.nativeEvent.layout.y

  将始终返回0。多级

  滚动视图

  没有问题。暂时的解决办法是避免将

  TextInput

  放在道具组件内
• 如果不是

  滚动视图

  ，则

  文本输入

  的偏移量相对于包装器组件。如果包装器不在ScrollView的顶部，则滚动距离必须是

  TextInput

  的偏移量和包装器的偏移量之和。由于父级的布局后数据在呈现之前无法通过prop直接传递给子级，因此

  TextInput

  必须在其

  onFocus

  处理程序中获取包装器的偏移量
• 默认错误键盘避免有时在

  onFocus

  之后采取操作，取消

  onFocus

  的效果。临时解决方案是使用

  setTimeout

  将

  onFocus

  操作延迟至少200毫秒

---

我说这一行（behavior={'padding'}keyboardVerticalOffset={64}）是你答案的关键点，对吗？是的，还有render（）中组件的层次结构，它起作用了吗？如果我在

滚动视图

之前放置一个高度较高的

视图，然后在显示的键盘上，
TextInput
是否显示在键盘上方？是，它应该在键盘上方。否，它不工作。相反，它冻结了滚动
render() {
    var a = [];
    for(var i =1; i< 100; i++) a.push(i);
    return (
        <View>
            <Button title = 'Scroll' onPress = {() => this.refs.scroll.scrollTo({x: 0, y: 0, animated: true})}/>
            <ScrollView ref = 'scroll'>{a.map((item, index) => (<TextInput style = {{height : 10 + (Math.floor(Math.random() * 10) * 5)}}
                placeholder = {item + ''}
                onFocus = {() => {
                    this.refs.scroll.scrollTo({x : 0, y : this.y[index], animated : true});
                }}
                onLayout = {event => {
                    this.y[index] = event.nativeEvent.layout.y;
                }}
            />))}</ScrollView>
        </View>
    );
}