react-native：條件呈現不起作用

在我的應用中，當數據加載時，我顯示一個加載器。當數據返回時，我將它顯示在列表中。這裏是一塊邏輯：react-native：條件呈現不起作用

let content = null; 
if(resultItems.length > 0){ 
    content = (
    <ScrollView style={{flex: 1, backgroundColor: '#ddd', marginTop: 5, marginBottom: 0}}> 
     {resultItems} 
    </ScrollView> 
); 
} else { 
    content = (
    <View style={{flex: 1, backgroundColor : 'red', justifyContent: 'center'}}> 
     <ActivityIndicator color="#368ec7" size={60} /> 
    </View> 
); 
}

內容在我的應用程序視圖渲染。 resultItems包含返回的數據。

起初裝載機正在顯示。但是，當數據加載時，列表被呈現，但加載器不會消失。

UPDATE內容正在變得像這樣：

... 
<View> 
    {content} 
</View> 
...

UPDATE從我所看到的，這個問題似乎是由以下事實幹，我使用條件呈現與獲取UI元素其內容來自某處。 E.I.像這樣將導致一個問題：

{真& &（{} someJsxFromVariable）}

來源

2017-04-10 Gilbert Nwaiwu

要退的內容，考慮到上述內容，不渲染（） –

你能發佈完整的代碼？ –

是的，但它很多。你可以在這裏查看：https://justpaste.it/edit/15520951/840ff036 –

試試這個。

render() { 
return(
    <View> 
    { 
    resultItems.length > 0 
    ? <ScrollView style={{flex: 1, backgroundColor: '#ddd', marginTop: 5, marginBottom: 0}}> 
     {resultItems} 
    </ScrollView> 
    : <View style={{flex: 1, backgroundColor : 'red', justifyContent: 'center'}}> 
     <ActivityIndicator color="#368ec7" size={60} /> 
    </View> 
    } 
    </View> 
)}

來源

2017-04-10 09:42:31

我早些時候嘗試過。同樣的結果。 –

的問題是，雖然你是有條件的渲染，財產ActivityIndicatoranimating仍然true，這將導致微調可見。

我建議使用react-native-loading-spinner-overlay庫。它是ActivityIndicator的封裝，但更易於使用。它使用一個模式來顯示ActivityIndicator，並且相應的狀態爲狀態。

使用

import Spinner from 'react-native-loading-spinner-overlay'; 

render() { 
    <ScrollView style={{flex: 1, backgroundColor: '#ddd', marginTop: 5, marginBottom: 0}}> 
     <Spinner visible={resultItems.length > 0 ? false : true } /> 
     {resultItems} 
    </ScrollView> 
}

來源

2017-04-10 15:51:21

react-native：條件呈現不起作用

回答

相關問題