React Native 键盘在 Android 上推送模式

Question

我有一个非常简单的模态组件，里面有一个

TextInput

，每当我专注于

TextInput

时，我的整个视图就会被推高。

对于较小的模态，这不是问题，但是我有一些高度较大的模态，其中我在最顶部有

TextInput

，使我的文本在上面消失。

我正在使用expo。

我尝试过的事情：

• 将

  expo/android/softwareKeyboardLayoutMode : "pan"

  添加到博览会

  app.json

• 使用

  KeyboardAvoidingView

• 使用第三方模态组件

  react-native-modal

代码：

import React, { useState } from 'react';
import { View, Text, Button, KeyboardAvoidingView, StatusBar, Dimensions } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';
import Modal from 'react-native-modal';

const TestModal = ({ visible, onClose }) => {

const window = Dimensions.get('window');
const WINDOW_HEIGHT = window.height;

  return (
    <Modal animationType="fade" visible={visible} onRequestClose={onClose} avoidKeyboard={true} style={{ alignItems: 'center' }}>
      <View style={{ alignItems: 'center', backgroundColor: 'grey', width: 350, height: WINDOW_HEIGHT * 0.8, borderRadius: 10 }}>
        <Text>This is a modal</Text>

        <TextInput style={{ width: 100, height: 40, borderRadius: 15, borderColor: 'black', borderWidth: 1 }} />
        <Button title="Close Modal" onPress={onClose} />
      </View>
    </Modal>
  );
};

export default TestModal;

Answer 1

我看到你的模态上有这个

avoidKeyboard={true}

这是文档中的

avoidKeyboard   bool    Move the modal up if the keyboard is open

尝试将其设置为 false。