使用Dimensions.get('window').height时如何让KeyboardAvoidingView适配MapView

我用MapView展示地图（占屏幕大部分区域），用户可通过两种方式指定位置：

• 拖拽地图上的Marker获取经纬度
• 通过底部TextInput输入地点名称

但激活键盘时，底部的TextInput会被遮挡，已尝试使用KeyboardAvoidingView但未生效。

相关代码：

<KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={{marginTop: '1%'}}
    > 
        <MapView
            style={[AppStyles.map]}
            initialRegion={{
            latitude: coords.latitude,
            longitude: coords.longitude,
            latitudeDelta: 0.4822,
            longitudeDelta: 0.3221,
            }}
        >
            <Marker 
                draggable
                coordinate={coords}
                onDrag={(e) => {setCoords(e.nativeEvent.coordinate)}}
                onDragEnd={(e) => setCoords(e.nativeEvent.coordinate)}
            />

        </MapView>
        <View style={[AppStyles.container, AppStyles.mapViewContainer]}>      
        <TextInput 
            style={[AppStyles.input]}
            onChangeText={(text) => setLocationName(text)}
            placeholder="Name of Location"
        />
            <TouchableOpacity style={[AppStyles.buttonBlue, AppStyles.section, AppStyles.buttonBlueSmall]} onPress={() => {addLocation}}>
              <Text style={AppStyles.locationButtonText}>Add</Text>
            </TouchableOpacity>
        </View>
    </KeyboardAvoidingView>

样式代码：

map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height - 200,
},

1. 让KeyboardAvoidingView占满全屏 #

当前KeyboardAvoidingView未设置全屏布局，无法正确响应键盘高度变化。修改其样式：

<KeyboardAvoidingView
  behavior={Platform.OS === "ios" ? "padding" : "height"}
  style={{ flex: 1, marginTop: '1%' }} // 添加flex:1占满屏幕
>

2. 给MapView设置flex布局替代固定高度 #

原MapView用固定高度window.height - 200，导致无法随KeyboardAvoidingView调整收缩。修改样式：

map: {
    width: Dimensions.get('window').width,
    flex: 1, // 替换固定高度为flex:1
},

同时给底部输入框容器设置固定高度或flexShrink:0，避免被压缩：

<View style={[AppStyles.container, AppStyles.mapViewContainer, { flexShrink: 0, height: 200 }]}>

3. 配置Android窗口软键盘模式 #

在AndroidManifest.xml对应Activity中添加adjustResize，确保系统调整窗口大小：

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustResize">

4. 可选：用ScrollView包裹内容 #

若上述方法无效，可替换为ScrollView包裹，增强键盘适配：

<ScrollView
  style={{ flex: 1 }}
  keyboardDismissMode="interactive"
  keyboardShouldPersistTaps="handled"
>
  <MapView style={AppStyles.map} {...你的MapView属性} />
  <View style={[AppStyles.container, AppStyles.mapViewContainer, { height: 200 }]}>
    {/* TextInput和按钮 */}
  </View>
</ScrollView>

调整后完整代码示例 #

<KeyboardAvoidingView
  behavior={Platform.OS === "ios" ? "padding" : "height"}
  style={{ flex: 1, marginTop: '1%' }}
>
  <MapView
    style={[AppStyles.map]}
    initialRegion={{
      latitude: coords.latitude,
      longitude: coords.longitude,
      latitudeDelta: 0.4822,
      longitudeDelta: 0.3221,
    }}
  >
    <Marker 
      draggable
      coordinate={coords}
      onDrag={(e) => {setCoords(e.nativeEvent.coordinate)}}
      onDragEnd={(e) => setCoords(e.nativeEvent.coordinate)}
    />
  </MapView>
  <View style={[AppStyles.container, AppStyles.mapViewContainer, { flexShrink: 0, height: 200 }]}>      
    <TextInput 
      style={[AppStyles.input]}
      onChangeText={(text) => setLocationName(text)}
      placeholder="Name of Location"
    />
    <TouchableOpacity style={[AppStyles.buttonBlue, AppStyles.section, AppStyles.buttonBlueSmall]} onPress={() => addLocation()}>
      <Text style={AppStyles.locationButtonText}>Add</Text>
    </TouchableOpacity>
  </View>
</KeyboardAvoidingView>

样式修改：

map: {
    width: Dimensions.get('window').width,
    flex: 1,
},

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