Question

我正在尝试通过FlatList加载大量数据，但是我面临的问题是，在滚动过程中出现空白，我也在不同的地方看到了这个问题，但没有一个告诉如何正确解决这个问题。 / p>

我通过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>
  )
 }
}

Answer 1

尝试播放FlatList的windowSize属性。如果该值太低，则可能导致空白屏幕；如果该值太高，则可能会占用大量内存。

供参考https://facebook.github.io/react-native/docs/virtualizedlist#windowsize

Answer 2

当您大幅增加windowSize时，响应性可能会受到影响，因为渲染内容可能会干扰对按钮点击或其他交互的响应，因此最好取适中的值，并且可以对项目使用占位符，以便直到加载数据，用户才看不到黑屏。

Answer 3

为什么在您的programm: robot robot1 = new robot(6, "wiliam"); robot1.Upgratestring(); //gives 6 befor an after //class class robot { public double speed; public string name; public robot(double speed,string name) { this.name = name; this.speed = speed; } public void Setspeed(double speed) { this.speed =speed; } public double Getspeed() { double speed = this.speed; return speed; } public void Upgratestring() { double speed = Getspeed(); speed = speed++; Setspeed(speed); //here is my proublem } }道具上，如果您不使用keyExtractor呢？

您应该尝试将index组件放入PureComponent

这将避免重新渲染组件并提高性能。

Answer 4

我尝试了getItemLayout的FlatList文档中可用的解决方案。

因此，要使此方法有效，您必须在flatList中指定卡片或行项目的高度，例如：渲染项目的高度（高度：100），以及在renderItem内部使用的Text加上prop numberOfLines = {1}，以免混乱动态内容上的卡片UI。注意：在renderItem，keyExtractor和intialNumberToRender = {list.length}

中使用纯组件

在滚动上反应本机FlatList产生空白

4 个答案: