如何在React Native（Android）中更改ActivityIndi​​cator的颜色？

Question

我需要将ActivityIndi​​cator的颜色更改为黑色，但仅限于应用的此区域。我不想在其他任何地方改变它。有谁知道如何改变Android和iOS的颜色？

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

Answer 1

 <ActivityIndicator color="#000000"/>

您可以在official documentation

中查看更多道具

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>
    );
  }
}

Answer 3

  

您需要将颜色作为道具添加到您的ActivityIndi​​cator，如下面的代码。

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

  

您可以详细了解ActivityIndicator

     

如果你想使用其他样式的ActivityIndi​​cator，它是一个很好的插件，可以使用ActivityIndicator Collection