React Native：Modal 中的 TextInput 在专注于 Android 后立即变得模糊

问：

我正在开发一个 React Native 组件，以便在 Modal 组件中有一个 TextInput 组件，这样当 Modal 出现时，用户可以输入相关文本。我正在使用 KeyboardAwareScrollView 库，以便当键盘出现时，它不会阻止 TextInput 组件。

但是，在 Android 上，一旦按下并聚焦 TextInput 组件，它就会变得模糊，因此键盘会弹出但会立即关闭。奇怪的是，这个问题在 iOS 上不会发生。

以下是我尝试/检查过的内容：

1. KeyboardAwareScrollView 已根据官方文档正确配置。
2. 即使我使用 KeyboardAvoidingView 而不是 KeyboardAwareScollView，问题仍然存在。
3. 向下滑动手势在 Modal 组件中正常工作。
4. 当我删除 Modal 组件时，问题停止发生，因此它必须与 Modal 组件和 TextInput 组件之间的触摸事件处理有关，但我不知道到底发生了什么。由于设计选择，我还需要保留模态组件。
5. 正如我所提到的，这个问题在 iOS 中根本不会发生，因此这必须与 Android 特定因素有关。

谁能帮我解决这个问题？以下是我正在使用的代码部分。（请原谅内联样式。我计划在解决这个问题后进行优化）：

const Input = props => {
  const setInputdate = props.setInputdate;

  const [input, setInput] = useState({comment: null, prepopulate:null});
  const [active, setActive] = useState(false);

  const onSwipeDown = () => {
    setInputdate(null);
  };

  return (
    <GestureRecognizer style={{flex: 1}} onSwipeDown={onSwipeDown}>
      <Modal
        visible={!(inputdate === null)}
        transparent={true}
        animationType="slide"
        >
          <KeyboardAwareScrollView
          contentContainerStyle={{
            height: '100%',
            width: '100%',
            justifyContent: 'center',
            alignItems: 'center',
            alignContent:'center',
            alignSelf:'center',
            backgroundColor: 'rgba(0, 0, 0, 0.5)', // Dark overlay color
            flexGrow:1
          }}
          extraHeight={10}
          enableOnAndroid={true}
          enableAutomaticScroll={(Platform.OS === 'ios')}
          >
          <TouchableOpacity
            style={{height:screenHeight-550,width:'100%'}}
            onPress={onSwipeDown}
          />
          <View
          style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            alignSelf:'center',
            alignContent:'center',
            backgroundColor: 'rgba(0, 0, 0, 0.5)'
          }}>
            <View
              style={{
                paddingLeft: 20,
                paddingRight: 20,
                height: 146,
                marginTop: 33,
                width: '100%',
              }}>
              <TextInput
                style={{
                  width: '100%',
                  padding:13,
                  paddingTop:13,
                  paddingBottom:13,
                  height: 80,
                  backgroundColor: 'white',
                  marginTop: 12,
                  height: 119,
                  borderRadius: 10,
                  fontSize:16,
                  textAlignVertical:'top'
                }}
                value={input.comment}
                multiline={true}
                placeholder='how are you feeling?'
                onChangeText={(value)=>{
                  setInput({...input, comment: value});
                }}
                onBlur={(event) => {
                  setInput({...input, comment: event.nativeEvent.text});
                  if (input.prepopulate) {
                    setActive(true);
                  }
              }}
              />
            </View>
            <TouchableOpacity
              style={{
                paddingLeft: 22,
                paddingRight: 22,
                width: '90%',
                borderRadius: 10,
                backgroundColor: active
                  ? 'rgba(80,80,80,1)'
                  : 'rgba(217,216,215,1)',
                height: 57,
                marginTop: 33,
                justifyContent: 'center',
                alignContent: 'center',
                alignItems: 'center',
              }}
              disabled={!active}
              onPress={saveDateData}>
              {input.prepopulate?
                <Text style={{color: 'white', fontSize: 18, fontWeight: 'bold'}}>
                Update
                </Text>
                :
                <Text style={{color: 'white', fontSize: 18, fontWeight: 'bold'}}>
                Record
                </Text>
              }
            </TouchableOpacity>
          </View>
        </KeyboardAwareScrollView>
      </Modal>
    </GestureRecognizer>
  );
};

const Screen = () => {
  /*
  Irrelevant code
  */

  return (
    /*
    Rest of the parent component
    */
    inputdate ? (
      <Input
        setInputdate={setInputdate}
      />
    ) : null
  )
}