web-dev-qa-db-ja.com

画像コンポーネントのReact-nativeで失敗したpropType

私はちょうどReactネイティブで始めて、React Webアプリケーションを作成するためのかなりまともな把握があります...私は、react forウェブ。

基本的に、親コンポーネント内のオブジェクトの配列をマッピングすることによって画像が動的に生成されるコンポーネントをレンダリングしています。

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： 'イメージ'に指定された無効なプロップ 'ソース'が 'BasicComponent'のレンダリングメソッドを確認してください

ここで何が起こっているのか誰か知っていますか？

javascriptxcodereactjsreact-native
34
Maxwelll

ローカルアセットが必要か、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}}
  />
);
57
Samuli Hakoniemi

ソース画像の設定にはURIを使用する必要があります

return (
  <Image 
    source={{uri: 'https://reactnative.dev/docs/assets/p_cat2.png'}}
  />
);
0
Nguyễn Quang Tuấn