无法在 React 本机应用程序内有效滚动

Question

我只是一个初学者，一直在致力于一个需要尽快完成的项目。我通过 API 获取了超过 5000 个数据列表，但是，该列表在滚动时效率不高，因此会破坏应用程序。我一直在 React Native 中搜索 FlatList 组件，我无法在我的项目中正确实施。 有人可以提供有关如何解决此问题的建议。我在下面附上了我的源代码 -

import React, {Component} from 'react';
import {Text, View, FlatList, ScrollView } from 'react-native';
import axios from 'axios';
import GalleryDetail from './GalleryDetail';

class GalleryList extends Component {

state = { photos: []};

componentWillMount() {
    axios.get('http://jsonplaceholder.typicode.com/photos')
    .then(response => this.setState({ photos: response.data })).
    catch((error)=> console.warn("fetch Error: ", error));
}

renderPhotos() {
    return this.state.photos.map( photos => 
        <GalleryDetail key={photos.id} photos= {photos}/>
    );
}


render () {
    return (
        <View>
            <ScrollView>
                {this.renderPhotos()}
            </ScrollView>
        </View>
    );
}
}

export default GalleryList;

我的 GalleryDetail 在哪里

import React, {Component} from 'react';
import { Text, View, Image } from 'react-native';
import Card from './Card';
import CardSection from './CardSection';

const GalleryDetail = (props)=> {
    return (
        <Card>
            <CardSection style = {styles.headerContentStyle}>
                <Image
                style={styles.thumbnailStyle}
                source = {{ uri: props.photos.thumbnailUrl}}/>
                <Text style= {styles.textStyle}>{props.photos.title}</Text>
            </CardSection>
        </Card>
    );
};

const styles = {
    headerContentStyle: {
       flexDirection: 'column',
       justifyContent: 'space-around'
   },

   thumbnailStyle: {
       height: 50,
       width: 50
   },

    textStyle: {
       textAlign: 'right',
       marginLeft: 3,
        marginRight: 3,
    }
}

export default GalleryDetail;

很抱歉没有提供正确的代码段。请帮忙

Answer 1

首先，您应该按照文档说明在componentDidMount 中进行网络调用。

其次，不要使用 ScrollView，因为它性能不佳，并且使用 FlatList 时，您不再需要 ScrollView。

第三，更新 GalleryDetail 以使用 props.photo 而不是 props.photos，因为您将单个对象传递给每一行（复数使其不直观）。并通过照片对象中的item属性访问数据：

const GalleryDetail = (props)=> {
    return (
        <Card>
            <CardSection style = {styles.headerContentStyle}>
                <Image
                style={styles.thumbnailStyle}
                source = {{ uri: props.photo.thumbnailUrl}}/>
                <Text style= {styles.textStyle}>{props.photo.title}</Text>
            </CardSection>
        </Card>
    );
};

最后使用下面的sn -p

  render() {
    if (!this.state.photos) {
      return <ActivityIndicator/>;
    }

    return (
      <FlatList
        data={this.state.photos}
        keyExtractor={this.keyExtractor}
        renderItem={this.renderPhoto}
      />
    );
  }

  keyExtractor = (photo, index) => photo.id;

  renderPhoto = ({item}) => {
    return < GalleryDetail photo={item} />;
  };