反应原生 ScrollView 项目，顶部和底部具有相同的填充

Question

我正在设计一个滚动组件，看起来像一个图像库。我试图根据设备高度将图像居中，并在顶部和底部使用等效的填充。但根据设备，顶部填充看起来不太好。我需要帮助才能使其在所有设备中保持一致。

为了获取设备的高度和宽度，我正在使用尺寸

  const {width: screenWidth, height: screenHeight} = 
   Dimensions.get('window');
    const width = screenWidth ;
    const height = screenHeight;

<View style={styles.DefaultView}>
          <ScrollView
           maximumZoomScale={1}
           minimumZoomScale={1}
           bouncesZoom={true}
           style={styles.scrollView}
           automaticallyAdjustContentInsets={true}
           pagingEnabled={true}
           horizontal={true}
           showsHorizontalScrollIndicator={false}
           onScroll={this._onScroll}
           contentContainerStyle={{flexGrow : 1, justifyContent : 'center'}}
           >
           {images.map((row, i) => (
              <View key={i}>
                  <Image
                      resizeMode='contain'
                      style={{width, height}}
                      source={{uri: row.src}}
                  />
              </View>
          ))}
           </ScrollView>
        </View>

const styles = StyleSheet.create({
    scrollView: {
        flex: 1,
        flexDirection: 'row',
    },
    DefaultView: {
        flex: 1,
        backgroundColor: '#000',
    },
});

请参阅附图了解当前输出

Answer 1

有一个道具叫做contentContainerStyle

<ScrollView 
  contentContainerStyle={{
    paddingTop: 25,
    paddingBottom: 25,
  }}>
 *** CONTENT ***
</ScrollView>

Answer 2

尝试将包含图像组件样式的视图指定为：

<View styles={{flex:1, justifyContent:'center', alignItems:'center'}}>... </View>

不提供顶部和底部的填充，并为图像提供固定的高度。