React Native ScrollView не прокручивается внизу

внутри моего приложения index.io.js есть только 1 ScrollView, который завернут внутри View под функцию render. Иногда я могу прокручивать до самого конца ScrollView и удерживать экран там. Однако ScrollView вернется в верхнюю часть экрана и не сможет оставаться внизу внизу.

Кто-нибудь знает, что происходит? Благодарю.

render() {
  return <View style={{flex: 1}}>
  <ScrollView>
    <Text>234</Text>
    <Text>234</Text>
    <Text>234</Text>
    <Text>234</Text>
    // .... repeat so many times ...
  </ScrollView>
  </View>
}

p.s: мой RN равен 0.28.0, цель развертывания iOS - 8.0

Ответ 1

Для React родных новичков вроде меня:

поиск ошибки установки {flex:1} в атрибуте scrollview contentContainerStyle, который в основном говорит прокруткуview явно не для прокрутки и ожидания ее прокрутки, поскольку это устанавливает высоту содержимого в один и тот же родительский кадр, который является scrollview

Ответ 2

Чтобы точно ответить на вопрос, ScrollView также должен иметь стиль = {{flex: 1}} prop. Для прокрутки ScrollView требуется высота набора.

Однако в моем случае у меня было дополнение в моем представлении прокрутки, и это, должно быть, выбросило некоторые вычисления в глубину системы. Я использую реакцию native 0.55.

Чтобы решить, мне нужно было изменить:

<ScrollView style={{flex: 1, padding: 10}}>
   //Content goes here
</ScrollView>

<View style={{padding: 10, flex: 1}}>
   <ScrollView style={{flex: 1}}>
      //Content goes here
   </ScrollView>
</View>

Ответ 3

Имейте в виду, что ScrollViews должны иметь ограниченную высоту для работы, поскольку они содержат детей с неограниченной высотой в ограниченном контейнере (через взаимодействие с прокруткой). Чтобы связать высоту ScrollView, либо установите высоту представления напрямую (обескуражен), либо убедитесь, что все родительские представления имеют ограниченную высоту. Забыв передать {flex: 1} вниз, стек представлений может привести к ошибкам здесь, которые инспектор элементов легко отлаживает.

https://facebook.github.io/react-native/docs/scrollview.html

Я думаю, вам следует назначить стиль вашему scrollView с свойством flex: 1. И создайте contentContainerStyle, чтобы иметь лучший дизайн.

Ответ 4

Добавление дополнительного бесполезного вида внизу scrollView:

<ScrollView>
//your contents here

  <View style={{height:100(or any suitable value)}} />
</ScrollView>

решил мою проблему.

Ответ 5

<ScrollView style={{flex: 1}}>
  <View style={styles.bottom}>
    {
       list.size > 0 && list.map((_, index) => {
        return (
          <View style={styles.listItem} key={index}>
            <Text style={styles.count}>{index + 1}</Text>
          </View>
        )
      })
    }
  </View>
</ScrollView>

использование flex: 1

Ответ 6

Когда вы используете в native реагировать, используйте flexGrow вместо flex. Если вы хотите получить более подробное руководство по этой причине, ознакомьтесь со статьей ниже:

https://medium.com/@peterpme/taming-react-natives-scrollview-with-flex-144e6ff76c08

Ответ 7

Раствор проверен на реакцию 0,57

IDK, исправили ли вы проблему, но это решение помогло мне

<ScrollView>
    <View style={{ padding: 10 }}>
        // User contents here
    </View>
</ScrollView>

Не нужно ничего сгибать. Это спокойствие кода будет генерировать представление с желобом на всех 4 сторонах. И круто то, что последний элемент не обрезается.

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

Проверьте демо здесь

Ответ 8

contentContainerStyle={{ paddingBottom: 60 }}

поэтому применение paddingBottom с определенным размером должно решить это за вас