反应天然图像插入和字符串

Question

我正在与React Native合作，并尝试获取图像以基于列表不同的标题变量显示。我认为我不使用JavaScript来处理字符串，但不确定如何解决此问题。有什么建议么？当我只需编码映像源路径时，它运行正常，所以我知道这是正确的。

<View style={{ flex: 8 }}>
     this.setState({
         link: './assets/' + this.props.title + '.jpg',
     });
     <Image source={require(this.state.link)} style={[styles.images]} />
</View>

Answer 1

您甚至不能在这样的视图中设置固定状态，并且需要说明您不能将字符串与另一个集字符串串联放置，始终需要完全需要语句像这个require("./assets/image.png");一样编码溶液可以这样：

import {...} from '...';
    const titleImages = {
      title1: require("./assets/title1.png"),
      title2: require("./assets/title2.png") //here title1/title2 should be the value that you receive in props
    };
    class Anyclass extends Component {
      render() {
        const { title } = this.props;
        return (
          <View style={{ flex: 8 }}>
            <Image source={titleImages[title]} style={[styles.images]} />
          </View>
        );
      }
    }

如果您有多个标题，则可以在 titleImages对象中声明"需要语句"并渲染图像。

Answer 2

也许，您可以尝试使用：

this.setstate（{ 链接：`./assets/${this.props.title}.jpg` }）;

Answer 3

从渲染内部搁置呼叫setState，这可能应该避免使用，我认为这里的问题是您正在尝试在require的调用中使用一个变量。require调用在构建时间由包装器解决，因此它们需要静态资源（不取决于变量的值）。这是对本地反应中静态资产管理策略的很好覆盖：https：//willowtreaeapps.com/ideas/react-native-native-tips-tips-and-tricks-2-0-managing-manative-manative-static-assets-assets-with-absolute paths/