React Native中TextInput获焦时处理滚动避免按钮被键盘遮挡

我来帮你搞定这个头疼的键盘遮挡问题！看你已经尝试用了键盘避让组件，但可能是组件用错了或者配置不到位，咱们一步步来调整：

1. 用对官方的KeyboardAvoidingView组件 #

首先，你代码里的<KeyboardAvoid>应该是KeyboardAvoidingView的简写吧？React Native官方提供的是KeyboardAvoidingView，这个组件需要指定behavior属性才能正常工作，不同平台适配的参数不一样：

• iOS推荐用padding或者position
• Android推荐用height

修改你的代码片段试试：

import { KeyboardAvoidingView, View, TextInput, Platform } from 'react-native';

// ... 你的其他代码

<KeyboardAvoidingView
  style={{ flex: 1 }}
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0} // 适配导航栏高度，根据你的布局调整
>
  <View style={{flexDirection:'row',width:dwidth-20,marginHorizontal:20,marginTop:15}}>
    <TextInput 
      style={{width:width-60,fontWeight:'bold',fontSize:18,}} 
      placeholder={this.state.quesText} 
      autoCapitalize="words" 
      onKeyPress={this.typing} 
      value={this.state.questionText} 
      onChangeText={(questionText) => this.setState({ questionText })}
    />
    {/* 这里是你的按钮组件 */}
  </View>
</KeyboardAvoidingView>

注意要给KeyboardAvoidingView设置flex:1让它占满屏幕，另外keyboardVerticalOffset可以调整避让的偏移量，比如你的页面有导航栏的话，iOS可能需要加64来适配。

2. 结合ScrollView使用（适合内容较多的页面） #

如果你的页面内容不止这一行输入框和按钮，用ScrollView包裹整个内容区域会更稳妥，键盘弹出时ScrollView会自动滚动让焦点元素可见：

import { ScrollView, KeyboardAvoidingView, Platform } from 'react-native';

<KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
  <ScrollView
    style={{ flex: 1 }}
    keyboardShouldPersistTaps="handled" // 点击非输入区域时键盘不收起，按需调整
    contentContainerStyle={{ flexGrow: 1 }}
  >
    {/* 你的页面内容，包括输入框和按钮 */}
    <View style={{flexDirection:'row',width:dwidth-20,marginHorizontal:20,marginTop:15}}>
      <TextInput 
        // ... 你的TextInput属性
      />
      {/* 按钮组件 */}
    </View>
  </ScrollView>
</KeyboardAvoidingView>

3. 手动监听键盘事件（极端场景下的方案） #

如果上面两种方法都不生效，那可以手动监听键盘的弹出和收起事件，动态调整按钮所在视图的位置：

import { Keyboard, View, TextInput } from 'react-native';

class YourComponent extends React.Component {
  state = {
    questionText: '',
    quesText: '请输入问题',
    keyboardHeight: 0,
  };

  componentDidMount() {
    this.keyboardShowListener = Keyboard.addListener('keyboardWillShow', this.handleKeyboardShow);
    this.keyboardHideListener = Keyboard.addListener('keyboardWillHide', this.handleKeyboardHide);
  }

  componentWillUnmount() {
    this.keyboardShowListener.remove();
    this.keyboardHideListener.remove();
  }

  handleKeyboardShow = (e) => {
    this.setState({ keyboardHeight: e.endCoordinates.height });
  };

  handleKeyboardHide = () => {
    this.setState({ keyboardHeight: 0 });
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        {/* 其他页面内容 */}
        <View 
          style={{
            flexDirection:'row',
            width:dwidth-20,
            marginHorizontal:20,
            marginTop:15,
            marginBottom: this.state.keyboardHeight, // 动态调整底部间距
          }}
        >
          <TextInput 
            // ... 你的TextInput属性
          />
          {/* 按钮组件 */}
        </View>
      </View>
    );
  }
}

先试试第一种方法，大部分情况下KeyboardAvoidingView配合正确的behavior就能解决问题，如果还是不行再尝试后面的方案。

内容的提问来源于stack exchange，提问作者baduga biz