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.这样的事情会导致一个问题：

{true＆amp;＆amp; （{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

问题在于，虽然您是条件渲染，但animating的属性ActivityIndicator仍为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>
}

react-native：条件渲染不起作用

2 个答案: