javascript - 在 React Native 中,如何在 iOS 中将 KeyboardAvoidingView 与 Modal 一起使用?
问题描述
我无法让 KeyboardAvoidingView 在 iOS 中工作,特别是在其中包装 Modal 时。在 Android 中测试,Modal 正确地避开了键盘,但在 iOS 中,键盘覆盖了 Modal。
这是一个可重现的示例,使用 iPhone X 作为我的测试设备:
import React, {useState} from 'react';
import {StyleSheet, ScrollView, View, Modal, TextInput, KeyboardAvoidingView, Button, SafeAreaView} from 'react-native';
export default function App() {
const [modalVisible, setModalVisible] = useState(false);
return (
<View style={styles.container}>
<Button title={"Open Modal"} onPress={() => setModalVisible(true)}/>
{modalVisible &&
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}>
<SafeAreaView style={styles.safeAreaView}>
<View style={styles.modalContentContainer}>
<Button title={"Close Modal"} onPress={() => setModalVisible(false)}/>
<ScrollView>
<View style={styles.textInputContainer}>
<TextInput
value={"test 1"}
onChangeText={() => {}}
onBlur={() => {}}
/>
</View>
<View style={styles.textInputContainer}>
<TextInput
value={"test 2"}
onChangeText={() => {}}
onBlur={() => {}}
/>
</View>
<View style={styles.textInputContainer}>
<TextInput
value={"test 3"}
onChangeText={() => {}}
onBlur={() => {}}
/>
</View>
<View style={styles.textInputContainer}>
<TextInput
value={"test 4"}
onChangeText={() => {}}
onBlur={() => {}}
/>
</View>
</ScrollView>
</View>
</SafeAreaView>
</Modal>
</KeyboardAvoidingView>}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
paddingTop: 50
},
safeAreaView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
modalContentContainer: {
margin: 100,
backgroundColor: "#d6d6d6",
width: "80%",
height: "60%",
borderRadius: 10,
},
textInputContainer: {
flex: 1,
margin: 40,
alignItems: "center",
}
});
您会注意到,当您打开 Modal 并点击最后一个 TextInput 字段时,键盘会出现并覆盖 Modal。正如预期的那样,Modal 不会避开键盘。
这是我在 iOS 中测试的屏幕截图,但它不起作用:
这是我在 Android 中测试的屏幕截图,它正在运行:
关于如何使模态避免在 iOS 中使用键盘的任何想法?
解决方案
您正在使用 KeyboardAvoidingView 包装您的 Modal。我不确定这一点,但从我的测试来看,似乎不可能使用 KeyboardAvoidingView 调整模态框的大小。
因此,将 KeyboardAvoidingView 移动到 Modal 内以获得预期的行为。像这样:
return (
<View style={styles.container}>
<Button title={"Open Modal"} onPress={() => setModalVisible(true)}/>
{modalVisible &&
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}>
<KeyboardAvoidingView behavior={"padding"} style={styles.safeAreaView}>
<View style={styles.modalContentContainer}>
<Button title={"Close Modal"} onPress={() => setModalVisible(false)}/>
<ScrollView>
<View style={styles.textInputContainer}>
<TextInput
value={"test 1"}
onChangeText={() => {}}
onBlur={() => {}}
/>
</View>
<View style={styles.textInputContainer}>
<TextInput
value={"test 2"}
onChangeText={() => {}}
onBlur={() => {}}
/>
</View>
<View style={styles.textInputContainer}>
<TextInput
value={"test 3"}
onChangeText={() => {}}
onBlur={() => {}}
/>
</View>
<View style={styles.textInputContainer}>
<TextInput
value={"test 4"}
onChangeText={() => {}}
onBlur={() => {}}
/>
</View>
</ScrollView>
</View>
</KeyboardAvoidingView>
</Modal>}
</View>
);
我还删除了您的 SafeAreaView,因为它目前没有做任何事情。您的父母已经居中,其内容将永远不会到达设备的“不安全”区域。
您不妨{modalVisible && ...}
从代码中删除 ,因为visible={modalVisible}
已经隐藏并在需要时显示模式。
推荐阅读
- rest - REST API 设置了一个不存在的参数
- d3.js - 在 D3 js 版本 5 中使用嵌套数据渲染文本
- python - 使用 zip() 创建一个列表
- sql - 识别客户拥有的产品
- php - 如何在已经用codeigniter编写的if语句中使用where条件
- javascript - bootstrap vue b-table 有时会挂起或冻结,导致浏览器在搜索或过滤时挂起或卡住
- sql - 如何让查询更快
- ios - 如何从 xcode 下载 iOS 应用程序/文件
- php - 致命错误:使用 str_get_html 时允许的字节内存大小耗尽
- matlab - ismember 日期问题