React Native Scrollview с flexGrow не прокручивает

Question

Я использую scrollview в моем собственном проекте. Но это не прокручиваемый, т.е. я не вижу верхних элементов. когда я прокручиваю вниз, вид отскакивает назад. Мои требования на самом деле так

1) Нижний элемент должен быть видимым -----> Теперь он работает нормально

2) во время прокрутки верхний элемент должен быть виден, не должен отскочить назад -----> Теперь это проблема

Вот мой код

return (
  <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
    <View style={styles.main}>
      <View style={styles.container}>
        ........(Some code)
      </View>
    </View>
  </ScrollView>
);

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "flex-end",
padding: 6,
paddingTop: 250
},
main: {
flex: 1,
height: 100
}
});

Есть идеи, что мне не хватает? Любая помощь будет принята с благодарностью!

Answer 1

Как я уже писал в комментарии, проблема может быть в том, что height: 100 используется с flex: 1 (по факту flexDirection является column по умолчанию, поэтому вы пытаетесь установить высоту двумя разными способами). Кажется, нет причин иметь это, просто удалите это. Чтобы сохранить ваш ScrollView прокручивая внизу я предлагаю вам сделать что-то вроде:

  <ScrollView
    contentContainerStyle={{ flexGrow: 1 }}
    ref={ref => (this.scrollView = ref)}
    onContentSizeChange={(contentWidth, contentHeight) => {
      this.scrollView.scrollToEnd({ animated: true });
    }}
  > ...

Я создал закуску, которая пытается воспроизвести ваш вопрос. Посмотри если хочешь!