Reactnative React Native：无法将具有 resizeMode包含的图像定位在父组件的 flexend

因此，我试图通过在Reaction Native中以相反的方向将两个图像滑出屏幕来设置它们的动画.这两个图像并排放置，with each image's parent component taking up 50% of the screen width.我希望图像被放置在彼此相邻的位置，它们之间没有任何间隙，并且它们还必须使用resizeMode="contain"来确保图像scale proportionally适合它们各自的容器while preserving their aspect ratios.

我已经try 了我能想到的所有方法，将左侧的Image组件定位到其父组件的最末端，将右侧的Image定位到其父组件的最开始处，以便它们可以彼此接触，但似乎都不起作用.图像始终位于各自容器的中心，如下图所示.

1. 在left side上，我有图像的左半部分，我想将其定位在blue container的最后.
2. 在right side上，我有图像的右半部分，我想要将其定位在red container的最开始.

以下是我的JSX代码:

return (
      <View
        style={{
          flexDirection: 'row',
        }}
      >
        <Animated.View
          style={{
            width: width / 2,
            height: '100%',
            justifyContent: 'flex-end',
            alignItems: 'flex-end',
            transform: [{ translateX: leftTranslateX }],
            backgroundColor: 'blue',
          }}
        >
          <Image
            source={leftSplash}
            style={{ width: '100%', height: '100%', alignSelf: 'flex-end' }}
            resizeMode="contain"
          />
        </Animated.View>
        <Animated.View
          style={{
            width: width / 2,
            height: '100%',
            justifyContent: 'flex-start',
            alignItems: 'flex-start',
            transform: [{ translateX: rightTranslateX }],
            backgroundColor: 'red',
          }}
        >
          <Image
            source={rightSplash}
            style={{ width: '100%', height: '100%', alignSelf: 'flex-start' }}
            resizeMode="contain"
          />
        </Animated.View>
      </View>
  );