React Native ActivityIndi​​cator不显示

Question

正在使用的软件包：

"@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"

而 myActivityIndicator被放置在一个屏幕组件中，如下所示：

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. 其他一切都在出现。在真实移动设备（红米 Note 7 Pro）和 Android 模拟器中进行了测试。好像是透明的。

有什么解决办法吗？

Answer 1

一定要给ActivityIndicator颜色。例如：

<ActivityIndicator size="large" color="#0000ff" />

Answer 2

在 react-native 0.63.3 上存在错误，在没有 color prop 的 android 上 Android 上 ActivityIndi​​cator 的默认颜色 #30057

Answer 3

从 React Native 版本 0.63 开始，ActivityIndi​​cator 组件存在一个 Android 特定错误（https://github.com/facebook/react-native/pull/30057/files），导致 ActivityIndi​​cator 的默认颜色为 null，因此组件将\xe2\x80\x99不会显示在屏幕上。但在 IOS 平台中，灰色被作为默认颜色传递，并且在那里工作得很好。

\n

因此，对于 Android，目前我们必须使用 color 属性（ https://reactnative.dev/docs/activityindicator#color ）显式地将颜色添加到 ActivityIndi​​cator，如下所示。此外，如果您想让应用程序在各个平台上保持一致，此属性将确保 Android 和 IOS 平台上的 ActivityIndi​​cator 显示相同的颜色。

\n

<ActivityIndicator animating={true} size="large" style={{opacity:1}} color="#999999" />\n

\n

Answer 4

我的解决方法是在根组件中的某个位置强制 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';
}