web-dev-qa-db-ja.com

Reactネイティブのrequire（image）は数値を返します

イベント名、日付、イベント画像などを受け取る1つのコンポーネントEventCardを含むjsファイルがあります。イベント画像が存在しない場合は、プレースホルダー画像をロードします。このステートメントは次のようになります

constructor(props){
    super(props);
    let imgUrl = props.image ? props.image : require("../assets/images/image.jpg");
    this.state = {image: imgUrl}
}

私はthis.stateをレンダー内で使用して、

source={{uri: this.state.image}}

プレースホルダーイメージのrequireを実行すると、奇妙に11になります。reactネイティブは、「uriの値をDoubleからStringにキャストできません」というエラーをスローします。

ヘルプは大歓迎です。

ありがとう

javascriptreactjsreact-nativerequire
5
Kireeti K

Requireを使用する場合は、イメージソースを直接割り当てる必要があります。

constructor(props){
  super(props);
  let imgUrl = props.image ? { uri: props.image } : require("../assets/images/image.jpg");
  this.state = { image: imgUrl };
}

そしてあなたのレンダリングで：

source={this.state.image}
4
Fawaz

あなたは単にこれを行うことができます

constructor(props){
    super(props);
    let imgUrl = props.image ? props.image : null
    this.state = {image: imgUrl}
}

source={imgUrl == null ? require("../assets/images/image.jpg") : this.state.image}
1
Haider Ali

いくつかの調査と@Fawazと@Haiderからのいくつかの助けの後、requireは数値を返す必要があることを理解しました。これは、requireの代わりにソースで直接数値を使用できることを意味し、それは機能します

<Image source={11} />

この番号に対応する画像がある場合は、ローカルリソースの画像が表示されます。したがって、サーバーの送信URLを表示するか、私の場合のようにローカルリソースを表示するかを決定する必要がある場合。基本的に{uri： "image-link"}またはrequire（ "image"）を挿入する@Fawaz回答を使用できます。requireは数値に解決され、ソースで使用すると、オブジェクトまたは数値のいずれかを配置しますドキュメントによる標準的な方法。

0
Kireeti K
You can try this,

import React, {Component} from 'react';
import {StyleSheet,ImageBackground} from 'react-native';

import bgSrc from './images/bgfrm.png';

export default class Wallpaper extends Component {
  constructor(props){
    super(props);
    let imgUrl = props.image ? props.image :bgSrc;
    this.state = {image: imgUrl};
}

  render() {
    return (
      <ImageBackground style={styles.picture} source={this.state.image}>
        {this.props.children}
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  picture: {
    flex: 1,
    width: null,
    height: null,
    resizeMode: 'cover',
  },
});
0
Uthaya

requireを動的に使用しないでください。この投稿の詳細な説明： React Native-動的な名前を使用したイメージが必要なモジュール

0
gazdagergo