React原生图像插入和字符串

问题描述：

我正在使用React Native，并试图让图像显示出基于标题变量的列表不同。我不认为我正在用JavaScript处理字符串，但不知道如何解决这个问题。有什么建议么？运行良好时，我只是硬编码的图像源路径，所以我知道这是正确的。React原生图像插入和字符串

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

尝试使用'path.join（'./ assets /'，this.props.title，'.jpg'）' –

[对图像文件反应原生使用变量]的可能重复（https://stackoverflow.com /问题/ 33907218 /反应天然使用的可变换图像文件） –

答

甚至不能在像这样的视图内设置setState，并且对于require语句，您不能将字符串与另一个设置的字符串连接，总是需要声明应该完全硬编码这样require("./assets/image.png"); 和SOLN可以是这样的：

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对象需要声明，可以使图像。

答

也许，你可以尝试使用：

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

答

从渲染器内部拨出setState的电话，这可能应该可以避免，我认为这里的问题是，您正尝试在对require的调用中使用变量。 require调用在构建时由包装器解析，因此它们需要一个静态资源（不依赖于变量值）。这是React Native中的静态资产管理策略的一个很好的报道：https://willowtreeapps.com/ideas/react-native-tips-and-tricks-2-0-managing-static-assets-with-absolute-paths/

React原生图像插入和字符串

相关推荐