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：条件呈现不起作用

回答

相关问题