ScrollView无法正确滚动所有组件

Question

我有这样写的卡片，它们水平滚动，但是每当我滚动时没有显示的最后一张卡片，下面就是当前代码的图像。

它们是水平滚动的价目表，请帮助我解决此问题。我拍了一下脑袋，看来我失败了

请帮助我，我们需要真正的帮助

class Pricing extends React.Component {
  state = {
   ...
  };
  render() {
    return (
      <ScrollView
        showsHorizontalScrollIndicator={false}
        horizontal={true}
        scrollEnabled
        pagingEnabled
        scrollEnabled
        showsHorizontalScrollIndicator={false}
        scrollEventThrottle={16}
        snapToAlignment="center"
      >
        {this.state.FlatListItems.map(item => (
          <View style={styles.subContainer} key={item.id}>
            <View style={{
              justifyContent: "center",
              alignItems: "center",
            }}>
              <View>
                <Image
                  source={item.image}
                /></View>
              <View>
                <Text style={styles.subType}>{item.subType}</Text>
                <Text style={styles.textSub}>{item.textSub}</Text>
              </View>
              <View>
                <Text style={styles.currency}>{item.amount}<Text style={styles.currencyText}> Month</Text></Text>
              </View>
            </View>
            <TouchableOpacity style={styles.button}>
              <Text style={styles.buttonText}>Subscribe</Text>
            </TouchableOpacity>
          </View>
        ))}
      </ScrollView>
    );
  }
}


const styles = StyleSheet.create({
  subContainer: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "transparent",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 0,
    },
    shadowOpacity: 0.22,
    shadowRadius: 10,
    elevation: 1,
    borderRadius: 10,
    padding: 15,
    marginTop: 20,
    width: '50%'
  },
})

Pricing.navigationOptions = {
  header: null
}

export default withNavigation(Pricing);