Question

我在其他应用中使用了ScrollView，只添加了style={styles.container}样式。但是在这个应用程序中，我创建了我的样式alignItems:'flex-start'，仅使用style={styles.container}引发错误，而您需要通过alignItems:'flex-start'传递contentContainerStyle={styles.container}。

错误：Invariant Violation: ScrollView child layout (["alignItems"]) must by applied through the contentContainerStyle prop.

然而，当我在视图中向下滚动时添加contentContainerStyle时，一旦手指从手机上抬起（或在模拟器中释放鼠标），滚动会自动返回到顶部。如果我只是使用style={styles.container}并取出alignItems:'flex-start'它会正确滚动，但我在UI中的项目并不是我需要它们的方式。导致它使用contentContainerStyle滚动回到顶部的原因是什么？是否有修复？

渲染：

var _that = this;
var iconsToShow = icons.map(function (icon, i){
  if(i < 81){
    return (
      <TouchableHighlight
        onPress={() => _that.changeIcon(indexToChange, icon)}
        underlayColor='#F7F7F7'
        key={i}>
          <Text style={styles.iconText}><IonIcons name={icon} size={30} color="#555" /></Text>
      </TouchableHighlight>
    );
  }
});

return (
  <Carousel width={SCREEN_WIDTH} animate={false} indicatorColor="#444" inactiveIndicatorColor="#999" indicatorAtBottom={false} indicatorOffset={16}>
    <View>
      <ScrollView contentContainerStyle={styles.container}>{iconsToShow}</ScrollView>
    </View>

    <View>
      //next page for carousel
    </View>

  </Carousel>
);

Answer 1

我想出了如何让它滚动。不要让ScrollView包裹ScrollView和alignItems:'flex-start'包含任何弹性样式，contentContainerStyle={styles.container}包含View，而是将其放在ScrollView上是style=的孩子，只使用contentContainerStyle=代替<ScrollView style={styles.container}> <Text style={styles.goalName}>{goal}</Text> <View style={styles.viewContainer}> {iconsToShow} </View> </ScrollView>。

渲染：

var styles = StyleSheet.create({
    container: {
        backgroundColor: 'transparent',
        paddingLeft:20,
        paddingRight:20
    },
    viewContainer:{
        flexDirection:'row',
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        flex: 1
    },
    iconText:{
        paddingLeft:15,
        paddingRight:15,
        paddingTop:15,
        paddingBottom:15
    },
    goalName:{
        textAlign:'center',
        marginTop:40,
        marginBottom:10,
        fontSize:20
    }
});

样式：

{{1}}

Answer 2

如果仍然无法解决问题，请尝试将{flex：1}放入ScrollView的“所有”父项中

React Native ScrollView在发布后抢回回顶部

2 个答案: