@react-native-async-storage警告消除与Expo登录页键盘遮挡问题求助

1. @react-native-async-storage/async-storage警告消除方案 #

• 两个操作都需要执行，步骤如下：
  1. 先安装依赖：Expo项目优先执行 expo install @react-native-async-storage/async-storage，普通React Native项目执行 npm install @react-native-async-storage/async-storage
  2. 替换所有代码中的AsyncStorage引入：把所有 import { AsyncStorage } from 'react-native' 的写法，全部替换为 import AsyncStorage from '@react-native-async-storage/async-storage'，对应调用逻辑不需要改动
  3. 如果上述两步完成后仍有警告，说明你项目中依赖的第三方库还在使用旧版内置AsyncStorage，可通过metro配置别名实现兼容，不需要修改第三方库源码

2. 键盘遮挡输入框修复方案 #

你现有代码存在核心问题，按以下步骤修改即可：

第一步：修正代码笔误 #

TextInput 组件的样式属性名写错了，把所有 styles = {styles.input} 改为 style={styles.input}，属性名错误会导致输入框样式不生效，是触发遮挡问题的常见原因。

第二步：适配不同平台的KeyboardAvoidingView行为 #

不同系统对键盘避让的适配逻辑不同，修改KeyboardAvoidingView的behavior属性为平台适配值，同时确保根样式加了flex:1，示例修改后的代码：

import { Platform } from 'react-native'

<KeyboardAvoidingView
  style={[styles.container, {flex: 1}]} // 确保flex:1占满全屏
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
>
  {/* 其余原有代码保持不变 */}
  <View style = {styles.inputContainer}> 
      <TextInput
          placeholder = "Email"
          value={email}
          onChangeText ={text => setEmail(text)}
          style = {styles.input} 
      />         
      <TextInput
          placeholder = "Password"
          value={password}
          onChangeText ={text => setPassword(text)}
          style = {styles.input} 
          secureTextEntry
      />         
  </View>   
  
  <View style = {styles.buttonContainer}>
      <TouchableOpacity
          onPress = {() => { } }
          style = {styles.button}
      >
          <Text style={styles.buttonText}>Login</Text>
      </TouchableOpacity>
      <TouchableOpacity
          onPress = {handleSignUp}
          style = {[styles.button, styles.buttonOutline]}
      >
          <Text style={styles.buttonOutlineText}>Register</Text>
      </TouchableOpacity>
  </View>                     
</KeyboardAvoidingView>

第三步：Expo Android端额外配置 #

如果是Android设备仍有问题，打开项目根目录的app.json，在android配置项下添加属性：

"android": {
  "windowSoftInputMode": "adjustResize"
}

修改后重启Expo服务即可生效。

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