如何在React Native（Android）中更改ActivityIndicator的颜色？

Question

我需要将ActivityIndicator的颜色更改为黑色，但仅在应用程序的此区域中。 我不想在其他任何地方更改它。 有人知道如何在Android和iOS上更改其颜色吗？

<ActivityIndicator 
    style={{position: 'absolute', right: 20, margin: 0, padding: 0}}
    animating={true}
    size='small'
/>

- FairyQueen

---

https://facebook.github.io/react-native/docs/activityindicator.html#color - bennygenel

Answer 1

 <ActivityIndicator color="#000000"/>

您可以在官方文档中查看更多的属性。

- Tarik Fojnica

---

我们可以像在refreshControl中使用多种颜色一样使用吗？ - HungrySoul

颜色 = ['＃ff0000'，'＃008000'，'＃0000ff'] 这样可以工作吗？ - HungrySoul

有没有想法如何更改FlatList刷新控件的颜色？ - james

Answer 2

你可以创建一个可重复使用的组件，并在需要时覆盖颜色。

Spinner.js:

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

const Spinner = props => {
  return (
    <View style={styles.spinnerStyle}>
      <ActivityIndicator color={props.color || "#000000"} />
    </View>
  );
};

const styles = {
  spinnerStyle: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
};

export default Spinner;

顺便提一下，您可以将#000000设置为默认颜色！

在需要使用时，只需在文件中导入并将其用作组件：

YourFile.js:

import React, { Component } from "react";
import { View } from "react-native";
import Spinner from "PATH_TO_SPINNER/Spinner";

class MyClass extends Component {
  render() {
    return (
      <View>
        <Spinner color="#663399" />
      </View>
    );
  }
}

- MohamadKh75

---

为什么要声明一个新组件，只是将颜色放在完全相同的字段中？为什么不直接使用ActivityIndicator中的color属性（参见@Tarik的答案）？ - Arthur Attout

那只是一个例子！通过这种方式，你可以自定义你的组件！ - MohamadKh75

不幸的是，这不是OP的问题。Tarik的答案更加直接了当。 - Arthur Attout

Answer 3

你需要像下面的代码一样将颜色作为属性添加到你的ActivityIndicator中。

<ActivityIndicator 
   style={{position: 'absolute', right: 20, margin: 0, padding: 0}}
   animating={true}
   size='small'
   color='#fff' 
/>

你可以查看更多 ActivityIndicator 相关信息。

如果你想使用其他样式的 ActivityIndicator，使用 ActivityIndicator Collection 插件是一个不错的选择。

- Pheng Sengvuthy