当在View中包装水平滚动View时，图像未正确对齐

Question

import React, {useState} from 'react';
import {
  ScrollView,
  Image,
  Dimensions,
  View,
  Text,
  StyleSheet,
} from 'react-native';

let {width} = Dimensions.get('window');
let height = width * 0.6;

const postedImages = [
  'https://bighaatdevstorage.blob.core.windows.net/communitypost/3921e47f-eb80-454c-9fe8-db7ce2df467e.png',
  'https://bighaatdevstorage.blob.core.windows.net/communitypost/4a5fbf2d-9a36-4111-a3ec-c78f9a2c5ee7.png',
  'https://bighaatdevstorage.blob.core.windows.net/communitypost/17d0390c-c34f-4158-bedd-f87a12d9dd49.png',
];

const ScrollViewImages = () => {
  const [active, setActive] = useState(0);
  const scrollHandler = ({nativeEvent}) => {
    const slide = Math.ceil(
      nativeEvent.contentOffset.x / nativeEvent.layoutMeasurement.width,
    );
    if (slide !== active) {
      setActive(slide);
    }
  };
  return (
    <View style={styles.container}>
      <ScrollView
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        onScroll={scrollHandler}
        style={{width, height}}>
        {postedImages.map(image => (
          <Image
            key={image}
            source={{uri: image}}
            style={{width, height, resizeMode: 'cover'}}
          />
        ))}
      </ScrollView>
      <View style={styles.pageContainer}>
        {postedImages.map((image, index) => (
          <Text
            key={image}
            style={{color: index === active ? 'red' : 'blue', margin: 3}}>
            ⬤
          </Text>
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width,
    height,
    margin: 20,
  },
  pageContainer: {
    flexDirection: 'row',
    position: 'absolute',
    bottom: 0,
    alignSelf: 'center',
  },
});

export default ScrollViewImages;

当我向右滚动时，上图也显示了该区域。我正在尝试用边距20和paddingHorizo​​ntal 20将图像的水平scrollView包装在View内。获得如图所示的输出。请有人帮我。

预期输出当包装在视图中时，scrollView应该可以正常工作，并且图像应在内部对齐以仅用于查看