在運行時在React native中加載圖像

我的應用程序中有很多這種情況，我需要在運行時設置圖像。例如在運行時在React native中加載圖像

1.我得到按鈕圖像URL點擊

2.我需要顯示上的按鈕圖像（裝載機）點擊

3.我需要根據改變的圖像在用戶的行動

我該怎麼做？到目前爲止，我無法弄清楚如何訪問我的節點（讓它成爲文本，圖像，文本輸入等）

對於顯示加載器圖像我發現了很多包，但我不想使用軟件包僅用於顯示加載程序映像。

任何代碼概念或教程將被讚賞。

更新：我設置圖像的構造函數（這是靜態圖片）類LoginScreen擴展組件{

constructor(props){ 
     super(props); 
     this.setState({imageUri:'../images/loader.gif'}); 
}

在render方法我使用這樣

<Image source={{uri: this.state.imageUri}} style={styles.image} />

圖像標籤它在圖像標籤上拋出空錯誤：「null不是一個對象（evlauating this.state.imageUri）。

我錯在哪裏？另外我需要設置按鈕點擊此圖像。在此之前，它應該被隱藏。如何實現這些場景？

來源

2016-06-23 Kumar Gaurav

所有這些情況都可以通過使用組件的狀態來存儲圖像URL來解決。例如：

<Image source={{uri: this.state.imageUri}} />

在渲染處理方法，依次爲：

this.setState({ 
    imageUri: // Some uri... 
})

將使你有一個基於兩個用戶事件動態圖像，並且運行時變量。

爲了在圖像下載時顯示加載狀態，我建議使用react-native-image-progress組件，它在圖像下載時處理加載指示器的顯示。

在開發React Native應用程序時，使用許多這樣的簡單組件是完全正常的，所以不要過分擔心使用這樣的第三方代碼。

來源

2016-06-23 08:25:25

我使用你的代碼在構造函數中設置狀態。它在我使用標記的行上拋出空指針錯誤。看起來像this.setState（{imageUri：'../ images/loader.gif'}）;在我的代碼中沒有工作。我用我的代碼更新了這個問題。請檢查是否有任何問題 –

你需要閱讀一些[React Native fundamentals]（https://facebook.github.io/react-native/docs/sample-application-movies.html） - 'this.setState '不在構造函數中使用，而應該使用'this.state = {...}' –

using this.state = {...}錯誤消失，但仍然不顯示圖像。我對兩種React Native的編碼風格感到困惑。在一個我們使用擴展組件，在另一個我們使用react.createClasss。兩者都有不同的編碼方式，我最終將它們混合在一起。也可能在這裏。你能幫助它爲什麼現在不顯示圖像嗎？ –

在運行時在React native中加載圖像

回答

相關問題