使用转换（scaleX）反应本机android View重叠

Question

我正在尝试在React Native中为水平滑动屏幕创建一个椭圆边框，为此我正在使用transform（scaleX），该视图在iOS上运行良好，但在Android中却重叠了（请参见屏幕截图） ，右下角）。我该如何解决这个问题？

         <SwipeView.Slide>
            <View flex={1} />
            <View style={styles.footerContainer}>
              <View style={styles.footer}>
              </View>
            </View>
          </SwipeView.Slide>
          <SwipeView.Slide>
            <View flex={1} />
            <View style={styles.footerContainer}>
              <View style={styles.footer}>
              </View>
            </View>
          </SwipeView.Slide>



const styles = StyleSheet.create({
footer: {
    width: DEVICE_WIDTH,
    borderTopLeftRadius: DEVICE_WIDTH / 1.5,
    borderTopRightRadius: DEVICE_WIDTH / 1.5,
    overflow: 'hidden',
    transform: [{scaleX: 1.3}],
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
    height: DEVICE_HEIGHT * 0.45,
    minHeight: 260,
    paddingTop: 45,
    paddingHorizontal: 25,
    alignItems: 'center',
      flex: 1
  },
    footerContainer: {
      height: DEVICE_HEIGHT * 0.45,
      minHeight: 280,
      paddingTop: Platform.select({
          ios: () => 55,
          android: () => 35,
      })(),
      paddingHorizontal: 25,
      width: DEVICE_WIDTH,
      overflow: 'hidden',
      alignItems: 'center',
  }
});