反应原生 ScrollView 项目在顶部和底部具有相等的填充答案

【问题标题】：react native ScrollView items with equal padding on both top and bottom反应原生 ScrollView 项目在顶部和底部具有相等的填充
【发布时间】：2020-07-02 16:45:30
【问题描述】：

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

要获取我正在使用的设备的高度和宽度 Dimension

  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',
    },
});

当前输出请参考附图

【问题讨论】：

标签： css reactjs react-native

【解决方案1】：

有一个叫做contentContainerStyle的道具

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

【讨论】：

可简化：contentContainerStyle={{paddingVertical: 25}}

【解决方案2】：

尝试将包含图像组件样式的视图赋予为：

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

不给顶部和底部填充，加上给图像一个固定的高度。

【讨论】：