Horizo​​ntal ScrollView 在末尾切割子视图

Question

我有一个 Scrollview 设置为水平，但是当它没有完全显示组件时，它会剪切最后一个视图，或者如果子视图的宽度和高度更大，它不会显示所有视图，它仍会剪切最后一个视图，我已尝试更改 contentContainerStyle 仍然会剪切，请问有什么问题

下面是我的代码

   export default class Home extends Component {
    constructor(props) {
    const Width = Dimensions.get('window').width;
    super(props);
    this.state = {
        n: '0',
        no: 0,
        width: Width / 3
    };
 }
 return (
 <View style={styles.ox}>
 <View style={styles.firstColumn}>
  <Text style={styles.columnText}>
     Top Sold Items in your School{'\n'}
  </Text>
     <View style={styles.pictures}>
         <ScrollView contentContainerstyle={{flexGrow:1,
             flexDirection: 'row',}}  horizontal={true}
                     showsHorizontalScrollIndicator={false}
                     showsVerticalScrollIndicator={false}
                     automaticallyAdjustContentInsets={false}
                     directionalLockEnabled={true}
                     bounces={false}
                     scrollsToTop={false}>
             <View style={styles.miniPictures}>
         </View>
         <View style={styles.miniPictures}>
         </View>
             <View style={styles.miniPictures}>
             </View>
             <View style={styles.miniPictures}>
             </View>
             <View style={styles.miniPictures}>
             </View>
             <View style={styles.miniPictures}>
             </View>
         </ScrollView>
     </View>
 </View>
 </View>
    );
}
}
const dimensions = Dimensions.get('window');
const Height = (dimensions.height) / 5;
const Width = dimensions.width;
const styles = StyleSheet.create({
pictures: {
    flex: 1,
},
miniPictures: {
    height: 70,
    width: 70,
    marginRight: 10,
    borderTopRightRadius: 6,
    borderTopLeftRadius: 6,
    borderBottomLeftRadius: 6,
    borderBottomRightRadius: 6,
    backgroundColor: '#000',
    borderColor: '#d1d1d1'
},
columnText: {
    fontFamily: 'mont-medium',
    fontSize: 12,
    color: '#000'
},
firstColumn: {
    flexDirection: 'column',
    marginLeft: '6%',
    marginRight: '40%',
    paddingTop: 20,
    width: Width,
    height: 200
},
ox: {
    flexDirection: 'column',
    width: '100%',
    marginTop: 15,
},
headerCenter: {
    fontFamily: 'mont-bold',
    fontSize: 34,
    alignSelf: 'center',
    marginTop: 27,
    marginBottom: 14,
    letterSpacing: 0.7,
},
icons: {
    width: Width * (14.5/100),
    height: Width * (14.5/100),
    borderRadius: (Width* (14.5/100))/2,
    backgroundColor: '#F2C490',
    alignContent: 'center'
},
iconRow:{
    flex: 1,
    alignContent: 'center',
    justifyContent: 'space-between',
    marginLeft: 15,
    marginRight: 15,
    flexDirection: 'row'
}
});

Answer 1

问题在：

firstColumn: {
    flexDirection: 'column',
    marginLeft: '6%',// Problem
    marginRight: '40%',
    paddingTop: 20,
    width: Width,// Problem
    height: 200
},

此样式有 marginLeft 6% 但宽度仍然为 Width，您可以将宽度更改为 Width - Width * 0.12 或删除 marginLeft