嘿，我之前做Expo项目时也碰到过类似的键盘适配坑，给你梳理下问题根源和解决方案：

问题分析 #

你遇到的两个核心问题：

1. 输入框在键盘下方时自动隐藏：是因为没有正确处理键盘弹出时的布局偏移，导致输入框被键盘覆盖后失去焦点
2. 用KeyboardAvoidingView后无法交互：大概率是外层View的position: relative + top: 25%定位方式，和KeyboardAvoidingView的布局逻辑冲突，导致组件实际可交互区域和视觉位置错位；另外Input组件的负margin也可能挤压了点击区域

解决方案 #

1. 修正布局逻辑，替换定位方式

把外层View的position: relative和top: 25%去掉，改用React Native原生的flex布局实现居中，这是避免布局冲突的关键：

2. 正确配置KeyboardAvoidingView

针对iOS和Android设置不同的behavior属性，同时适配导航栏/状态栏的偏移量，确保键盘弹出时布局正确上移

3. 调整Input组件的样式，移除负margin

负margin容易导致组件可点击区域被压缩甚至消失，改用正margin控制间距

完整修正代码示例 #

import { KeyboardAvoidingView, View, CheckBox, Text, Platform } from 'react-native';
import { Input } from 'react-native-elements';

// 你的组件类代码
class PasswordGenerator extends React.Component {
  state = {
    useAlpha: true,
    useNum: true,
    useSym: true,
    passwordLength: '12'
  };

  render() {
    return (
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        // iOS用padding，Android用height适配更稳定
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        // 适配状态栏/导航栏高度，Expo中如果有导航栏可调整这个值
        keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0}
      >
        <View style={{ flex: 1, justifyContent: 'center', paddingHorizontal: 12 }}>
          {/* 字母选项 */}
          <View style={{ flexDirection: "row", alignItems: 'center' }}>
            <CheckBox 
              value={this.state.useAlpha} 
              onValueChange={(val) => this.setState({ useAlpha: val })} 
            />
            <Text style={{ color: "#002c3e", marginLeft: 8 }}>Use Alphabets</Text>
          </View>

          {/* 数字选项 */}
          <View style={{ flexDirection: "row", alignItems: 'center', marginTop: 8 }}>
            <CheckBox 
              value={this.state.useNum} 
              onValueChange={(val) => this.setState({ useNum: val })} 
            />
            <Text style={{ color: "#002c3e", marginLeft: 8 }}>Use Numbers</Text>
          </View>

          {/* 符号选项 */}
          <View style={{ flexDirection: "row", alignItems: 'center', marginTop: 8 }}>
            <CheckBox 
              value={this.state.useSym} 
              onValueChange={(val) => this.setState({ useSym: val })} 
            />
            <Text style={{ color: "#002c3e", marginLeft: 8 }}>Use Symbols</Text>
          </View>

          {/* 密码长度输入框 */}
          <View style={{ flexDirection: "row", alignItems: 'center', marginTop: 8, marginLeft: 6 }}>
            <Text style={{ color: "#002c3e" }}>Password Length:-</Text>
            <Input 
              containerStyle={{ marginLeft: 8, width: 60 }}
              keyboardType="numeric" 
              inputContainerStyle={{ borderBottomWidth: 2, borderBottomColor: "#002c3e" }} 
              style={{ fontSize: 12 }} 
              value={this.state.passwordLength} 
              onChangeText={(txt) => this.setState({ passwordLength: txt })} 
            />
          </View>
        </View>
      </KeyboardAvoidingView>
    );
  }
}

额外优化建议 #

如果你的页面内容较多，建议把KeyboardAvoidingView里的View换成ScrollView，并设置contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}，这样键盘弹出时可以滚动到输入框位置，适配更多场景。

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