首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >React本机ActivityIndicator未显示

React本机ActivityIndicator未显示
EN

Stack Overflow用户
提问于 2020-07-18 02:44:30
回答 6查看 12.7K关注 0票数 34

正在使用的包:

代码语言:javascript
运行
复制
"@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被放在一个屏幕组件中,如下所示:

代码语言:javascript
运行
复制
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 Emulator中进行了测试。看起来是透明的。

有什么办法解决这个问题吗?

EN

回答 6

Stack Overflow用户

发布于 2020-07-18 04:17:44

请确保为ActivityIndicator指定颜色。例如:

代码语言:javascript
运行
复制
<ActivityIndicator size="large" color="#0000ff" />
票数 97
EN

Stack Overflow用户

发布于 2020-10-17 21:40:22

在没有色彩道具Default color for ActivityIndicator on Android #30057的安卓系统上,react-native 0.63.3存在错误

票数 25
EN

Stack Overflow用户

发布于 2021-01-20 19:10:37

从React Native版本0.63开始,ActivityIndicator组件存在一个Android特有的bug(https://github.com/facebook/react-native/pull/30057/files),导致ActivityIndicator的默认颜色为空,因此该组件将不会显示在屏幕上。但在IOS平台中,灰色被作为默认颜色传递,而且在那里运行得很好。

因此,对于Android,目前我们必须使用颜色属性(https://reactnative.dev/docs/activityindicator#color)显式地将颜色添加到ActivityIndicator,如下所示。此外,如果你想保持你的应用程序跨平台的一致性,这个属性将确保ActivityIndicator在安卓和IOS平台上显示相同的颜色。

代码语言:javascript
运行
复制
<ActivityIndicator animating={true} size="large" style={{opacity:1}} color="#999999" />
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62960067

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档