React-Native Screen не генерирует базовую c прокрутку - PullRequest
Новая
       24

React-Native Screen не генерирует базовую c прокрутку

0 голосов
/ 13 июля 2020

Я новичок в использовании ReactNative, я создал экран с 2-3 компонентами внутри. Все работало хорошо, но позже, когда я добавил больше компонентов ... Я ожидал увидеть, что все они просто делают движение прокрутки, но все похоже на замораживание без прокрутки. Если я заверну свой экран в <ScrollView>, все будет отлично, но есть предупреждение.

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

Экран 

<View style={{flex: 1}}>
  <Image 
    style={styles.image} 
    preview={{uri: listing.images[0].thumbnailUrl}}
    tint="light"
    uri={listing.images[0].url} 
  />
  <View style={{flex: 1}}>
    <SomeComponent>Hi</SomeComponent>
    <FlatList>...</FlatList>
    .
    .
    .
    .
    <SomeComponent>More of these that should generate a scrool</SomeComponent>    
  </View>
</View>

Ответы [ 2 ]

0 голосов
/ 14 августа 2020

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

Я предлагаю вам иметь что-то вроде это для предотвращения перекрытия прокрутки: 

<View style={{ flex: 1 }}>
  <FlatList
    ListHeaderComponent={
      <Fragment>
        <Image
          style={styles.image}
          preview={{ uri: listing.images[0].thumbnailUrl }}
          tint="light"
          uri={listing.images[0].url}
        />
        <View style={{ flex: 1 }}>
          <SomeComponent>Hi</SomeComponent>{' '}
        </View>
      </Fragment>
    }
    ListFooterComponent={
      <Fragment>
        . . . .
        
        <SomeComponent>
          More of these that should generate a scrool
        </SomeComponent>
      </Fragment>
    }
  >
    ...
  </FlatList>
</View>

Таким образом, у вас есть только один FlatList, но вы все равно можете отображать контент до или после. Вы можете поэкспериментировать с реквизитами FlatList, в зависимости от того, хотите ли вы, чтобы верхний и нижний колонтитулы всегда были видны или нет.

0 голосов
/ 21 июля 2020

Похоже, это предупреждение возникает из-за того, что вы по существу визуализируете scrollview внутри scrollview.

Если вы просто хотите отобразить элементы в одном прокручиваемом списке, можно использовать .map для добавьте компоненты в существующий scrollview вместо использования компонента Flatlist внутри.

Другой способ исправить это - использовать Flatlists ListFooterComponent и ListHeaderComponent. Оберните все, что находится выше вашего плоского списка, в компонент и передайте его в опору плоских списков ListHeaderComponent и повторите для элементов под вашим плоским списком, используя ListFooterComponent.

Наконец, если он работает нормально с завернутым в ScrollView, вы всегда можете просто скройте предупреждение, используя 

import { YellowBox } from 'react-native'



YellowBox.ignoreWarnings([
  'VirtualizedLists should never be nested', // TODO: Remove when fixed
])

Удачи!

...