SVG 在 React Native 中被削减

Question

我使用 react-native-svg 和 react-native-svg-transformer 在我们的应用中渲染 SVG。所有 SVG 都正确渲染，除了这个 SVG 在其右侧被切断。这是渲染后的 SVG（svg 的右侧被截断）：

这是我想要渲染的原始 svg：

我不知道我做错了什么，但我也尝试使用 viewBox 道具，仍然没有效果。我该如何纠正？

代码：

import YourEldercarePartner from '../../Assets/Images/WelcomeScreenSVGImages/Your-Eldercare-Partner.svg';

const data = [
        ...
        {
            heading: "Welcome to Emoha!",
            svg: {
                image: YourEldercarePartner,
                width: hp(40),
                height: hp(40)
            },
            message: "India’s largest virtual community of Elders. This app is your one-stop solution for everything Elders need to live a healthy and energized life in the comfort of home."
        },
        ...
];

return (
    <Swiper 
        ref={swiper}
        loop={false}
        onIndexChanged={index => setIndex(index)}
        showsButtons={false}
        showsPagination={true}
        renderPagination={handlePagination}
    >
        {
            data.map((datum, idx) => <Screen datum={datum} key={idx}/> )
        }
    </Swiper>
)

const Screen = ({ datum }) => (
    <View style={styles.container}>
        <View style={styles.main}>
            <Text style={styles.heading}>
                {datum.heading}
            </Text>
            <View style={{ marginTop: 10, flex: 10, justifyContent: 'flex-start' }}>
                <datum.svg.image
                    width={datum.svg.width} 
                    height={datum.svg.height}  
                />
            </View>
            <Text style={styles.message}>
                {datum.message} 
            </Text>
        </View>
    </View>
)