react-native：条件付きレンダリングが動作しない

Question

私のアプリでは、データがロードされているときにローダーを表示します。データが返ってくるとリストに表示されます。ここでは、ロジックの一部は次のとおりです。

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}）}

Answer 1

これを試してみてください。

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> 
)} 

Answer 2

問題は、条件付きのレンダリングされているものの、ActivityIndicatorのプロパティanimatingはスピナーが見えるようにする原因となる、まだ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> 
}