React-Native에서 실패한 propType on Image 구성 요소

React-Native에서 실패한 propType on Image 구성 요소

React-native로 시작한 지 얼마 안 되어 React가 웹 어플리케이션을 만드는 방법을 잘 이해하고 있습니다.웹 리액션에서는 전혀 발생하지 않았던 혼란스러운 문제가 발생하고 있습니다.

기본적으로 부모 컴포넌트의 객체 배열에 매핑하여 이미지가 동적으로 생성되는 컴포넌트를 렌더링합니다.

export default class ImageComponent extends React.Component {
  render() {
    return (
        <Image source={this.props.source}/>
    );
  }
};

그리고 그 부모 컴포넌트:

export default class MainComponent extends React.Component {
  constructor(props) {
    super(props);
   this.state = {
      images:[
        { src: './src/images/1.png'},
        { src: '/src/images/2.png'},
        { src: './src/images/3.png'}
      ]
    }
   }

  render() {
    let images = this.state.images.map((image) => {
      return(<ImageComponent source={image.src}  />);
    })

    return (
      <View>
        {images}
      </View>
    );
  }
};

디바이스 시뮬레이터에서 다음 오류가 발생합니다.

"경고: 실패한 propType:'Image'에 제공된 소품 'source'가 잘못되었습니다. 'BasicComponent'의 렌더 메서드를 확인하십시오."

여기서 무슨 일이 일어나고 있는지 아는 사람 있나요?

로컬 자산을 요구하거나 개체를 사용하여uri열쇠.

그래서 어느쪽이든MainComponent:

this.state = {
  images:[
    require('./src/images/1.png'),
    require('./src/images/2.png'),
    require('./src/images/3.png')
  ]
}

또는 인BasicComponent:

return (
  <Image 
    source={{uri: this.props.source}}
  />
);

소스 이미지 설정에 uri를 사용해야 합니다.

return (
  <Image 
    source={{uri: 'https://reactnative.dev/docs/assets/p_cat2.png'}}
  />
);

언급URL : https://stackoverflow.com/questions/36460827/react-native-failed-proptype-on-image-component