React Native ScrollView 在发布后重新回到顶部答案

【问题标题】：React Native ScrollView snapping back to top after releaseReact Native ScrollView 在发布后重新回到顶部
【发布时间】：2016-04-14 09:49:09
【问题描述】：

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

错误：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>
);

【问题讨论】：

标签： scrollview react-native

【解决方案1】：

我想出了如何让它滚动。不要让View 包装ScrollView 和ScrollView 具有任何flex 样式或alignItems:'flex-start' 和contentContainerStyle={styles.container}，而是将其放在View 上，它是ScrollView 的子级，只需使用@ 987654328@ 而不是 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
    }
});

【讨论】：

你应该选择这个作为答案，因为它解决了你的问题。此外，这与我使用 FlatList 时遇到的问题相同，可能是因为它是 ScrollView 的子类。
嗨，Doug，你能解决这个问题吗？我在 flatlist 上遇到了同样的问题，找不到解决方案

【解决方案2】：

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

【讨论】：