효율적으로 난 그냥 초보자 지속적으로 곧 완료해야하는 프로젝트를 진행하고있다 생각합니다 네이티브 응용 프로그램

Question

반응 iniside 스크롤 할 수 없습니다. 그러나 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- 내 소스 코드를 첨부했습니다. 문서가 설명대로 componentDidMount에서 네트워크 호출을해야

Answer 1

가 먼저 도와주세요. 이 확대됨에 아니에요과 FlatList를 사용하는 경우, 당신은 더 이상있는 ScrollView를 필요로하지 않기 때문에

둘째는있는 ScrollView를 사용하지 마십시오. 각 행에 하나의 객체를 전달대로

셋째, 업데이트 GalleryDetail 대신 props.photos의 props.photo를 사용하는 (복수는 카운터 직관적). 그리고 사진 객체의 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} />; 
    };