元素在 Scrollview 中消失

Question

我想创建一个内部有滚动视图的视图，然后我想在该滚动视图中放置 3 张卡片。像这样 View > ScrollView > Cards 但是当我将卡片放入滚动视图时，卡片会消失，但如果滚动视图被评论则出现。我试过将 flex:1 给父视图，scrollview 但它不起作用

这是代码

 <View style={styles.section3}>
      <ScrollView horizontal={true}>
        <View style={styles.card}></View>
        <View style={styles.card}></View>
        <View style={styles.card}></View>
        <View style={styles.card}></View>
      </ScrollView>
    </View>

样式

  scrollView: {
    // flex: 2,
    backgroundColor: 'black',
  },
  card: {
    // flex: 4,
    width: '90%',
    height: '70%',
    marginHorizontal: '5%',
    marginVertical: '10%',
    backgroundColor: 'white',
    borderRadius: 25,
    opacity: 0.9,
    top: -15,
  },

Answer 1

主要问题是宽度、marginHorizontal 等水平属性的 % 值。如果 ScrollView 是水平的，则 React 无法计算渲染视图的区域，因为它不是固定的，对于垂直属性（如高度）也是如此，如果方向是垂直的，则为 marginVertical。

这是我所做的更改，主要是水平属性。

  section3: {
    flex: 1,
  },
  card: {
    // flex: 4,
    width: 190, // or some other value
    height: '70%',
    marginHorizontal: 16,
    marginVertical: '10%',
    backgroundColor: 'white',
    borderRadius: 25,
    opacity: 0.9,
    top: -15,
  },

我个人避免使用宽度、高度等的百分比值

当我们知道父视图将在屏幕上覆盖的区域时，我认为它们很好。

元素在 Scrollview 中消失

Element disappear in Scrollview

android

react-native

react-native-android