我有一個加載模式，目前覆蓋了整個屏幕，我想讓它只覆蓋它被調用的組件。

加載模式調用加載組件。

import React from 'react';
import { Modal, StyleSheet, View } from 'react-native';

import Loading from '../basic/Loading';

const LoadingModal: React.FC<Props> = ({  loading,text = 'Logging in' }) => (
  <Modal style={styles.body} animationType="fade" visible={loading} transparent >
    <View style={styles.overlay} />
    <View style={styles.outerContainer}>
      <Loading style={styles.modal} inline text={text} />
    </View>
  </Modal>
);

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    opacity: 0.4,
    backgroundColor: '#b1b1b1',
  },
  outerContainer: {
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modal: {
    borderRadius: 10,
    padding: 20,
    ...boxShadow,
  },
});

export default LoadingModal;

加載組件:

const Loading: React.FC<Props> = ({
  text,
  inline,
  style,
  size = 'large',
  ...rest
}) => {
  const { colors } = useTheme();
  
  return (
    <View
      style={
        inline ? [styles.basic, style] : [styles.basic, styles.fullPage, style]
      }
    >
      <AppText>{text}...</AppText>
      <ActivityIndicator color={colors.primary} size={size} {...rest} />
    </View>
  );
};

const styles = StyleSheet.create({
  basic: {
    backgroundColor: 'white',
    flexDirection: 'row',
    alignItems: 'center',
  },
  fullPage: { flex: 1, justifyContent: 'center' },
});

export default Loading;

我嘗試了什么: 我試著給父組件添加相對位置樣式，但是不起作用。