React Native Dialog点击输入框后不随键盘上移的解决方案求助

问题描述 #

在React Native应用中，使用Dialog编辑列表项：点击齿轮图标弹出带有两个TextInput的Dialog，但点击输入框时Dialog不会上移为键盘腾出空间，预期Dialog能随键盘上移。

已尝试操作 #

• 用KeyboardSafeView包裹Dialog的多种组合，均无效
• 发现Expo环境下无此问题，整个应用会随Floating Action Button一起上移，希望实现相同的整个应用上移效果

预期效果 #

相关代码 #

<SafeAreaView style={styles.parent}>
    <Text style={styles.title}>Devices</Text>
    <List.Section style={{ width: "100%" }} >
        {devices.map((d, index) => {
            return <List.Item
                onPress={() => handleElementPressed(d)}
                title={d.getName()}
                description={d.getNumber()}
                left={props => <List.Icon {...props} icon="sim" />}
                right={props => <IconButton {...props} icon="cog" onPress={() => {
                    setDeviceIndex(index);
                    setDeviceName(d.getName());
                    setPhoneNumber(d.getNumber());
                    setVisible(true);
                }} />}
                key={index}
            />
        })}
    </List.Section>
    <FAB icon="plus" style={styles.fab} />
</SafeAreaView>
<Dialog visible={visible} onDismiss={() => setVisible(false)}>
    <Dialog.Title>{devices[deviceIndex].getName()}</Dialog.Title>
    <Dialog.Content>
        <TextInput label="Name" value={deviceName} onChangeText={text => setDeviceName(text)} />
        <TextInput label="Number" value={phoneNumber} onChangeText={text => setPhoneNumber(text)} />
    </Dialog.Content>
    <Dialog.Actions>
        <Button onPress={() => setVisible(false)}>Cancel</Button>
        <Button onPress={() => {
            setDevices((d) => {
                d[deviceIndex].setName(deviceName);
                d[deviceIndex].setNumber(phoneNumber);
                return d;
            });
            setVisible(false);
        }}>Save</Button>
    </Dialog.Actions>
</Dialog>

问题截图 #

解决方案 #

1. 配置AndroidManifest.xml调整键盘模式 #

在android/app/src/main/AndroidManifest.xml的主Activity中添加android:windowSoftInputMode="adjustResize"，这是让Android系统在键盘弹出时调整窗口大小的核心配置，Expo默认已配置该属性：

<activity
    android:name=".MainActivity"
    android:windowSoftInputMode="adjustResize">
    <!-- 其他原有配置 -->
</activity>

2. 用KeyboardAvoidingView包裹整个应用 #

不要单独给Dialog套KeyboardSafeView，而是将整个应用的根组件（包括SafeAreaView和Dialog）放入KeyboardAvoidingView中，根据平台设置对应的behavior：

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

// 根组件结构调整
<KeyboardAvoidingView
  style={{ flex: 1 }}
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
>
  <SafeAreaView style={styles.parent}>
    {/* 原SafeAreaView内的列表、FAB等内容 */}
  </SafeAreaView>
  <Dialog visible={visible} onDismiss={() => setVisible(false)}>
    {/* 原Dialog内容 */}
  </Dialog>
</KeyboardAvoidingView>

这样整个应用会随键盘弹出一起上移，和Expo环境的效果一致。

3. 检查第三方Dialog组件的属性 #

如果使用的是react-native-paper的Dialog（从代码看大概率是），它基于Modal实现，需要开启avoidKeyboard属性：

<Dialog 
  visible={visible} 
  onDismiss={() => setVisible(false)}
  avoidKeyboard={true}
>
  {/* Dialog内容 */}
</Dialog>

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