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