Реакция Native FlatList на прокрутку создает пробелы - PullRequest
Новая
       5

Реакция Native FlatList на прокрутку создает пробелы

0 голосов
/ 26 ноября 2018

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

Данные, которые я получаю через мой API

Мой текущий FlatList: 

<FlatList
      data={this.state.todayFixtures}
      renderItem={this.renderTournaments}
      extraData={this.state.refresh}
      keyExtractor ={(item, index) => item.tournamentId}
    />

и renderTournaments: 

renderTournaments(fix) {
return <FootballDetail key={fix.tournamentId} todayFixture={fix} />;
}

Пока есть FootballDetail: 

sadasd
class FootballDetail extends Component {
state = {
fixtureToday: []
}
componentWillMount() {
//console.log(this.props.todayFixture.item);
this.setState({fixtureToday: this.props.todayFixture.item[0].matches});
}
constructor(props){
 super(props)
}
_onPressButton(fixture) {
Alert.alert(fixture.teamA + " - " + fixture.teamB)
}
renderTodayFixtures() {
  const { status, teams, teamResult } = styles;
  return this.state.fixtureToday.map((fixture) =>
    <CardSection>
      <View style={status} >
        {CommonFunctions.getStatus(fixture)}
      </View>
      <TouchableHighlight underlayColor="white" style={teams} onPress={() 
      => { this._onPressButton(fixture) }}>
        <View>
          <Text>{fixture.teamA}</Text>
          <Text>{fixture.teamB}</Text>
        </View>
      </TouchableHighlight>
      <View style={teamResult}>
        <Text>{fixture.teamAResult}</Text>
        <Text>{fixture.teamBResult}</Text>
      </View>
      <View style={{ justifyContent: 'center' }}>
        <Image source={require('../assets/img/notification_tab.png')} style={{width: 22, height: 22}} />
      </View>
    </CardSection>
)
}
render () {
 return (
  <Card>
    <CardSection>
      <View>
        <Text style={styles.tournamentTxt}>{this.props.todayFixture.item[0].tournamentName}: {this.props.todayFixture.item[0].tournamentStage}</Text>
      </View>
    </CardSection>
    {this.renderTodayFixtures()}
  </Card>
  )
 }
}

Ответы [ 3 ]

0 голосов
/ 28 ноября 2018

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

enter image description here

0 голосов
/ 08 февраля 2019

Почему на ваших keyExtractor реквизитах вы добавляете index, если не используете его?

Вам следует попытаться поместить ваш FootballDetail компонент в PureComponent

Это позволит избежать повторного рендеринга вашего компонента и улучшить производительность.

0 голосов
/ 26 ноября 2018

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

Для справки https://facebook.github.io/react-native/docs/virtualizedlist#windowsize

...