URI 소스의 이미지가 React Native에 표시되지 않습니다.

Question

비슷한 질문에 대한 답변을 모두 읽었으며 아무도 내 문제를 해결하지 못했습니다. 아래 코드와 첨부 된 스크린 샷에서 볼 수 있듯이 성공을위한 모든 조언을했지만 행운은 없습니다.

1. 나는 https로 플리커에서 사진을 검색하고있다 : // 유효한 API 키는
2. 모든 필요한 사진이 성공적으로
3. 이 FlatList 사용 (스크린 샷 참조) 검색 및 var에 imadeData에 저장됩니다 (코드 참조) 사진 ID를 통해 3 열의 항목을 나열하십시오. 스크린 샷은 3 개의 칼럼을 보여 주지만 사진은 보이지 않습니다.

Photo.js

const url = 'https://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' + API_KEY + '&user_id=46262470@N03&format=json&&per_page=20&nojsoncallback=1'; // MSU flickr 

class Photos extends Component { 
    constructor (props) { 
     super(props); 
     this.state = { 
      imageData: [], 
      isLoading: true, 
      isError: false, 
      text: '', 
      columns: 3, 
      key: 1, 
     }; 
    } 

getImageData=() => { 

     return fetch(url) 

      .then((response) => response.json()) 
      .then((responseJson) => { 

       this.setState({ 
        isLoading: false, 
        imageData: responseJson.photos.photo 
       }); 
      }) 
      .catch((error) => { 
       console.error(error); 
      }); 
    }; 


    componentDidMount() { 

     this.getImageData(); 

    } 
<FlatList 
       numColumns={ columns } 

       data = { imageData } 
       // extraData={this.state} 
       renderItem={ ({ item, index }) => { 

        return <ImageList itemWidth={ (ITEM_WIDTH - (10 * columns))/columns } 
            photoId={ {uri: item.id } } /> 

       }} 
       keyExtractor={ 
        (item, index) => { 
         return `${item.id + index}` 
         // return { index } 
        } 
       } 
       // refreshing={this.state.refreshing} 
       // onRefresh={this.handleRefresh} 
      /> 

ImageList.js없는 사진 2

편집과

render() { 

     const {itemWidth, photoId, onPressItem } = this.props; 

     return (
      <Card> 

       <TouchableWithoutFeedback 

        onPress = {() => onPressItem && onPressItem(this.props.photoId)} 
        onPressIn = {() => this.animateIn()} 
        onPressOut ={() => this.animateOut()} > 

        <Animated.View style={{ 
         margin:5, 
         // backfaceVisibility: 'hidden', 
         transform: [ 
          { 
           scale: 1 
          },{ 
          rotateY: this.state.animateItem.interpolate({ 
           inputRange: [0,1], 
           outputRange: ['180deg','0deg'] 
          }) 
          } 
         ] 
        }}> 
         <Image style={{width: itemWidth, height: 200 }} source={{ photoId }} /> 
        </Animated.View> 
       </TouchableWithoutFeedback> 

      </Card> 

     ); 


    } 

Chrome console log with no errors and correct data retrieved

[iOS 시뮬레이터 화면을 보여주는 그리드보기 :

마지막 응답의 포인터에 따라 사진 ID 대신 전체 URL이있는 새로운 변수 photoURL로 photoId를 다시 만들었습니다. 나는 다음을 사용한다 : const photoURL = 'https://farm'+ item.farm + '.static.flickr.com /'+ item.server + '/'+ item.id + '_'+ item.secret + '_c.jpg ';

const photoURL = 'https://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_c.jpg'; 

        return <ImageList itemWidth={ (ITEM_WIDTH - (10 * columns))/columns } 
            image={ {uri: photoURL } } /> 

는 또한 올바른 사진이 브라우저에 각 코딩 사진을 붙여 이미지의 src URI에 PARAM로 반환되고 있음을 확인했습니다.

하지만 이미지는 여전히 내 수정 사항이 적용된 앱 화면에 표시되지 않습니다. 내 기분이 끝날 때 도와 줘. 감사.

Answer 1

내 부분에 2 개의 오버뷰가 있기 때문에 화면이 비어 있습니다. 1). FlatList에 제공되는 데이터 소품이 새 상태가 아니 었습니다. 즉, data = {imageData}가 잘못 되었음이 수정되었습니다 : data = {this.state.imageData}

2) ImageList 구성 요소에 데이터를 전달할 때 prop data = {item}을 포함시켜 새 데이터 배열을 전달하는 것을 잊었습니다. 나는 틀리게 대신에 uri 소품을 만드는 데 중점을 두었습니다.이것은 RN 라이브러리 요소와 비슷한 구성 요소 및 변수의 이름 지정에 대한 조언입니다. 내가 사용한 두 변수 모두 내가 이미지 문을 작성하고 있다고 생각하게 만들었습니다.

응용 프로그램이 올바르게 작동합니다. 광고를 가져 와서 이미지를 3 열 또는 1 열의 격자로 표시합니다.

또 다른 조언은 FlatList의 renderItem 섹션에서 구성 요소를 호출하기 전에 반환을 포함시키는 것입니다. 감사합니다

Answer 2

사진이 로컬에 저장되어 있습니까? 그렇지 않은 경우 이미지 구성 요소에 오른쪽 source 소품이 없습니다. 당신은 URI를 사용하려는 경우에는 다음과 같아야합니다

<Image style={{width: itemWidth, height: 200 }} source={{ uri: photoId }} /> 

및 photoId는 URL입니다.

는 URL 변경 (처음에는 정의되지 않은)와 같은 문제가되지 렌더링 재 this documention

Answer 3

봐 발생을보십시오.

flatList에 데이터의 변경을 알리고 이미지를 다시 렌더링하면 이미지가 표시됩니다.

<FlatList 
       numColumns={ columns } 

       data = { imageData } 
       extraData={this.state} 
       renderItem={ ({ item, index }) => { 

        return <ImageList itemWidth={ (ITEM_WIDTH - (10 * columns))/columns } 
            photoId={ {uri: item.id } } /> 

       }} 
       keyExtractor={ 
        (item, index) => { 
         return `${item.id + index}` 
         // return { index } 
        } 
       } 
      />