Question

此代码有效：

<Image source={require('./../img/icons/mlb/kc.png')} />

此代码不会：

var team = 'kc'; //Retrieved from API
var string = './../img/icons/mlb/'+team+'.png'
<Image source={require(string)} />

错误：

未处理的JS异常：需要未知模块 “./../img/icons/mlb/kc.png”。如果您确定该模块在那里，请尝试重新启动打包程序或运行“npm install”。

有没有办法动态地包含图像而不将它们添加到Xcode？

Answer 1

根据React的Image documentation，不，这是不可能的。

请注意，要使其正常工作，必须静态了解require中的图像名称。

如果您事先知道所有图像并事先需要它们，则可以这样做。然后，您可以直接使用团队名称作为图像名称。

这样的事情：

var teamA = require("./../img/icons/mlb/teamA.png");
var teamB = require("./../img/icons/mlb/teamB.png");
var teamC = require("./../img/icons/mlb/teamC.png");

// if you like imports better, then:
// import { default as teamA } from "./img/icons/mlb/teamA.png";
// import { default as teamB } from "./img/icons/mlb/teamB.png";
// import { default as teamC } from "./img/icons/mlb/teamC.png";

const teamByName = (teamName) => {
    switch (teamName) {
        case "teamA": return teamA;
        case "teamB": return teamB;
        case "teamC": return teamC;
    }
};

const TeamImage = ({team}) => (
    <Image source={teamByName(team)} />
);

修改

是否可以要求使用动态字符串并且不使用Xcode的图像？

1 个答案: