React Native ScrollView snapping back to top после релиза

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', он прокручивается правильно, но мои элементы в пользовательском интерфейсе не выложены, как они мне нужны. Что заставляет его прокручивать назад вверх с 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

Я понял, как заставить его прокручивать. Вместо того, чтобы в View обертывание 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> 

Styling:

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 
    } 
});