反应原生图像源中的条件语句答案

【问题标题】：conditional statement in react native image source反应原生图像源中的条件语句
【发布时间】：2019-08-11 07:27:02
【问题描述】：

"react": "16.8.3",
"react-native": "0.59.5",

我想随时使用本地图像和 uri，我根据发送给它的道具编写了一个组件来为我执行此操作。但似乎条件语句在 react native image 中不起作用，或者 require 不适用于动态字符串。

const CustomImage = ({ img, url, size, rounded, style, onClick }) => {
    alert('imageeeeeeeeeeee', typeof (img));
    let REQURE_STATEMENT= null;
    if (img !== null) {
        REQURE_STATEMENT= require('./../src/assets/images/close.png');
    }
    return (
        <TouchableOpacity activeOpacity={0.85} onPress={()=> onClick() }>
            <Image
                source={url === null ? REQURE_STATEMENT: { uri: url }}
                style={{ width, height, borderRadius: rounded, backgroundColor: 'red', ...(style) }}
                onPress={() => console.log('clickkkkkkkkkkkkkkkkkkkkkkkkkk')}
            />
        </TouchableOpacity>

    );
};

我什至尝试过

let path= `./../path/${imageName}`
 <Image source={url === null ? require(path): { uri: url }}/>

但它失败并出现此错误：

why not support error: bundling failed: Error: error: bundling failed: Error: components\common\CustomImage.js:Invalid call at line 42: require(image)
    at C:\Users\ui4\Desktop\react-git\mbz-mobile-app\node_modules\metro\src\JSTransformer\worker.js:317:19
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\ui4\Desktop\react-git\mbz-mobile-app\node_modules\metro\src\JSTransformer\worker.js:75:24)
    at _next (C:\Users\ui4\Desktop\react-git\mbz-mobile-app\node_modules\metro\src\JSTransformer\worker.js:95:9)

【问题讨论】：

试试这个 - let path="./../src/assets/images/close.png";让 uri = { uri: url };

标签： reactjs react-native

【解决方案1】：

您可以像这样在Image 组件之外执行此操作：

const CustomImage = ({ img, url, size, rounded, style, onClick }) => {
  alert('imageeeeeeeeeeee', typeof (img));
  let REQURE_STATEMENT= null;
  if (img !== null) {
    REQURE_STATEMENT= require('./../src/assets/images/close.png');
  }
  return (
    <TouchableOpacity activeOpacity={0.85} onPress={()=> onClick() }>
      {url === null ? (
        <Image
          source={REQURE_STATEMENT}
          style={{ width, height, borderRadius: rounded, backgroundColor: 'red', ...(style) }}
          onPress={() => console.log('clickkkkkkkkkkkkkkkkkkkkkkkkkk')}
        />
      ) : (
        <Image
          source={{ uri: url }}
          style={{ width, height, borderRadius: rounded, backgroundColor: 'red', ...(style) }}
          onPress={() => console.log('clickkkkkkkkkkkkkkkkkkkkkkkkkk')}
        />
      )}
    </TouchableOpacity>
  );
};

【讨论】：

【解决方案2】：

万一有人还在苦苦挣扎……

<Image source={dynamicUrl ? {uri: dynamicUrl} : require(defaulPathtString) />

【讨论】：