logo标签列表

React Native的ActivityIndicator无法显示

androidreact-nativeactivity-indicator
40

我正在使用的软件包：

"@react-native-community/datetimepicker": "^2.6.0",
"@react-native-community/masked-view": "^0.1.10",
"@react-native-firebase/app": "^8.2.0",
"@react-native-firebase/auth": "^8.2.0",
"@react-navigation/drawer": "^5.8.5",
"@react-navigation/native": "^5.7.0",
"@react-navigation/stack": "^5.7.0",
"date-fns": "^2.14.0",
"react": "16.13.1",
"react-native": "0.63.0",
"react-native-gesture-handler": "^1.6.1",
"react-native-razorpay": "^2.1.35",
"react-native-reanimated": "^1.9.0",
"react-native-safe-area-context": "^3.1.1",
"react-native-screens": "^2.9.0",
"react-native-vector-icons": "^7.0.0"

而我的 ActivityIndicator 被放置在一个屏幕组件内，就像这样：

import React from 'react'
import { View, Text, ActivityIndicator, StyleSheet, Image } from 'react-native'
   

export default function Loading({navigation}) {
       
    return (
        <View style={styles.container}>
            <Image
                style={styles.main_logo}
                source={require('../assets/logo.png')}
            />
            <Text style={styles.loading_text}>...Loading...</Text>
            <ActivityIndicator animating={true} size="large" style={{opacity:1}}  />
            
        </View>
    )
    
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red'
  },

  main_logo : {
    width: 100,
    height: 53,
    marginBottom: 20
  },

  loading_text : {
      color: 'white'
  },

  
})

问题是，它没有显示ActivityIndicator。其他所有内容都出现了。在真实的移动设备（Redmi Note 7 Pro）和Android模拟器中都经过测试。似乎是透明的。

有任何解决方法吗？

你需要展示更多的东西。 - D10S
@D10S，我已经编辑过了，请检查。 - Vpp Man
它没有显示任何东西 - 你看到<Text>组件了吗？ - Dan
@Dan 只有ActivityIndicator没有出现。其他所有内容都按预期出现。 - Vpp Man
抱歉，这超出了我的知识范围。祝你好运，Vpp 男士。 - D10S
显示剩余4条评论
6个回答
118

一定要为ActivityIndicator指定颜色。例如：

<ActivityIndicator size="large" color="#0000ff" />
44
这绝对荒谬，这个属性没有默认值... - Kolyunya
1
我认为它默认为灰色。如果您像我刚才那样尝试在灰色背景上显示它，那么可能只是运气不好。尽管如此，我认为文档应该在示例中包括颜色属性。 - srayner
30
8
从React Native版本0.63开始，存在一个与Android相关的问题(https://github.com/facebook/react-native/pull/30057/files)，会导致ActivityIndicator组件的默认颜色为null，因此该组件不会显示在屏幕上。但对于IOS平台，GREY将作为默认颜色传递，它在那里运行良好。
因此，对于Android，我们目前必须使用颜色属性(https://reactnative.dev/docs/activityindicator#color)显式地添加颜色到ActivityIndicator中，如下所示。此外，如果您想在各个平台上保持一致的应用程序风格，此属性将确保在Android和iOS平台上显示相同的ActivityIndicator颜色。
<ActivityIndicator animating={true} size="large" style={{opacity:1}} color="#999999" />
6

我在根组件中使用的一个解决方案来强制设置Android默认颜色值，例如：

import { ActivityIndicator, Platform } from "react-native";

// fix https://github.com/facebook/react-native/issues/30056
if (Platform.OS === 'android') {  
  if (!ActivityIndicator.defaultProps) ActivityIndicator.defaultProps = {};
  ActivityIndicator.defaultProps.color =  'gray';
}
2

试试这个组件

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Modal,
    ActivityIndicator
} from 'react-native';

const Loader = props => {
    const {
        loading,
        ...attributes
    } = props;

    return (
        <Modal
            transparent={true}
            animationType={'none'}
            visible={loading}
            onRequestClose={() => {console.log('close modal')}}>
            <View style={styles.modalBackground}>
                <View style={styles.activityIndicatorWrapper}>
                    <ActivityIndicator
                        animating={loading} />
                </View>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    modalBackground: {
        flex: 1,
        alignItems: 'center',
        flexDirection: 'column',
        justifyContent: 'space-around',
        backgroundColor: '#00000040'
    },
    activityIndicatorWrapper: {
        backgroundColor: '#FFFFFF',
        height: 100,
        width: 100,
        borderRadius: 10,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-around'
    }
});

export default Loader;

然后像这样调用组件

<Loader loading={this.state.isLoading} />

this.state.isLoading可能是true或false

1

我遇到了类似的问题（在模态框中渲染ActivityIndicator），但是设置颜色属性并没有解决。然而，由react-native-paper提供的ActivityIndicator组件按预期工作，只需按照入门指南操作，然后将其放置在标准的react-native组件位置即可。请参见：https://callstack.github.io/react-native-paper/activity-indicator.html。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接