inisideを効率的にスクロールできないネイティブアプリケーションに反応する

Question

私は初心者であり、すぐに完了する必要のあるプロジェクトに常に取り組んでいます。私はAPIを介して5000リストのデータをフェッチしましたが、スクロールで効率的ではないので、アプリケーションが壊れます。私はReact NativeのFlatListコンポーネントを検索していましたが、これは自分のプロジェクトで正しく実装できません。 誰かがこの問題に取り組む方法の提案をしてください。私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; 

申し訳あり、どこで

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; 

below-私のソースコードを添付しています。助けてください

Answer 1

最初に、ドキュメントで説明されているように、まずcomponentDidMountに電話をかけてください。

第2に、パフォーマンスが悪く、FlatListを使用しているため、ScrollViewはもう必要ありません。

第3に、個々のオブジェクトを各行に渡すときに（複数の場合は直観に反するように）、Props.photosの代わりにprops.photoを使用するようにGalleryDetailを更新します。そして、写真のオブジェクトで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> 
    ); 
}; 

、対応するための次のスニペット

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} />; 
    };