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>

來源

2017-12-02 User 965

嘗試使用'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對象需要聲明，可以使圖像。

來源

2017-12-03 03:10:48

也許，你可以嘗試使用：

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

來源

2017-12-02 22:57:45

從渲染器內部撥出setState的電話，這可能應該可以避免，我認爲這裏的問題是，您正嘗試在對require的調用中使用變量。 require調用在構建時由包裝器解析，因此它們需要一個靜態資源（不依賴於變量值）。這是React Native中的靜態資產管理策略的一個很好的報道：https://willowtreeapps.com/ideas/react-native-tips-and-tricks-2-0-managing-static-assets-with-absolute-paths/

來源

2017-12-02 23:18:26

React原生圖像插入和字符串

回答

相關問題