Question

what my screen looks like now click this link

由于某些原因我无法横向滚动，但我无法弄清楚问题，我已经为样式设置了flex，我的代码显示如下：

<View style={styles.contentContainer}>
      <ScrollView horizontal>
        {meetups.map((meetup, i) => (
          <View key={i} style={styles.meetupCard}>
            <View style={styles.meetupCardTopContainer}>
              <Text style={styles.meetupCardTitle}>
                {meetup.title}
              </Text>
            </View>

            <View style={styles.meetupCardBottomContainer}>
              <Text style={styles.meetupCardMetaName}>
                {meetup.group.name}
              </Text>
              <Text style={styles.meetupCardMetaDate}>
                Mar 2m 6:00pm
              </Text>
            </View>

          </View>
        ))}
      </ScrollView>
    </View>

并且样式定义如下：

const styles = EStyleSheet.create({
  root: {
    flex: 1
  },
  titleContainer: {
    flex: 0.1,
    paddingHorizontal: '2.5%',
    paddingVertical: '2.5%'
  },
  title: {
    color: '#fff',
    fontSize: 25,
    fontFamily: 'SignikaRegular'
  },
  contentContainer: {
    flex:1
  },
  meetupCard: {
    height: 200,
    width: 175,
    marginHorizontal: '1.5%',
    borderWidth: 2,
    borderColor:'#fff',
    backgroundColor: '#40D4EB'
  },
  meetupCardTopContainer: {
    flex: 1,
    position: 'relative'
  },
  meetupCardBottomContainer: {
    flex: 0.5,
  },
  meetupCardMetaDate: {
    fontSize: 13,
    fontFamily: 'SignikaLight'
  }
});

如何让它成功滚动？非常感谢！

Answer 1

从 meetupCard 中移除 marginHorizontal 或不使用百分比

时，它会滚动

ScrollView不起作用

1 个答案: