ListView всегда прокручивается вверх в React-Native

Я использую react-native для мобильного приложения iOS, где я использую ListView для отображения списка сигналов тревоги. Я создал свой собственный многократно используемый компонент представления списка под названием ComponentListView, в который я могу передать компонент, который я хочу отобразить в каждой строке, и данные для представления списка. Если у меня много будильников, и я прокручиваю вниз, чтобы увидеть будильники в конце, он всегда прокручивается обратно наверх (см. пример приложения ниже на rnplay с симптомами), и, следовательно, я не могу работать с будильниками в конце . Я думаю, что это может иметь какое-то отношение к тому, как я создал компонент ComponentListView, потому что, если я просто использую простой компонент ListView, он работает, как и ожидалось, но мне нужно использовать компонент ComponentListView, так как у меня много разных экранов, где я должен отображать список с другим компонентом, и это упрощает мою работу.

Я создал образец приложения на rnplay, который показывает эти симптомы. Пожалуйста, запустите на iOS. Здесь AlarmList использует ComponentListView для отображения списка аварийных сигналов, а AlarmSummary — это компонент, отображаемый в каждой строке.

Пример приложения на rnplay

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

Пожалуйста, дайте мне знать, если у вас есть какие-либо указатели для решения проблемы.


react-native react-native-listview
person Varun Gupta    schedule 15.05.2016    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Дайте атрибут flex: 1 также sceneContainer, например:

sceneContainer: {
  flex: 1,
  marginTop: 60
},

Здесь работает: https://rnplay.org/apps/TL9N9g.

person Ivan Chernykh    schedule 15.05.2016
comment
Спасибо, ваш ответ решил проблему, но я до сих пор не совсем понимаю, как отсутствие flex: 1 привело к тому, что прокрутка не работает должным образом. Я понимаю, что flex: 1 позволит контейнеру использовать все доступное пространство. Если у меня нет flex: 1, он будет использовать только необходимое пространство. Это потому, что отсутствие flex: 1 приводило к тому, что контейнер выходил за границы, и, следовательно, прокрутка фактически не требовалась? Не могли бы вы пролить свет на это, если у вас есть еще некоторые идеи? - person Varun Gupta; 15.05.2016
comment
@VarunGupta, из документов: Чтобы ограничить высоту ScrollView, либо установите высоту представления напрямую (не рекомендуется), либо убедитесь, что все родительские представления имеют ограниченную высоту. Если вы забудете передать {flex: 1} вниз по стеку представлений, это может привести к ошибкам, которые легко отладить с помощью инспектора элементов. , ссылка: facebook.github.io/react-native/releases/0.25/docs/ - person Ivan Chernykh; 15.05.2016

arrow_upward
0
arrow_downward

Для простоты: вам нужно установить высоту самого ListView ИЛИ установить высоту контейнера/родительского элемента, используя явное значение «высоты» или установив «flex» в стиле.

<View style={{flex:1}}>
   <ListView />
</View>

<View>
   <ListView style={{height:300}} />
</View>
person Tope    schedule 05.02.2017