react-native-paper中Spinner颜色无法改为绿色，如何解决？

问题描述 #

尝试将react-native-paper的Spinner（即ActivityIndicator）自定义为绿色，但无论怎么设置始终显示紫色，现有代码如下：

/* eslint-disable prettier/prettier */

import { ActivityIndicator, Colors, Searchbar, withTheme } from "react-native-paper";
import { MD3LightTheme as DefaultTheme, Provider as PaperProvider } from "react-native-paper";
import { FlatList, SafeAreaView, StatusBar } from "react-native";
import React, { useContext } from "react";

import { CategoryContext } from "../../../services/category/category.context";
import { CategoryInfoCard } from "../components/category-info-card.component";
import { Spacer } from "../../../components/spacer/spacer.component";
import { colors } from "../../../infrastructure/theme/colors";
import styled from "styled-components/native";

/* eslint-disable prettier/prettier */
/* const cardGap = 16;
const cardWidth = (Dimensions.get("window").width - cardGap * 3) / 2; */

const theme = {
    ...DefaultTheme,
    // Specify custom property
    myOwnProperty: true,
    // Specify custom property in nested object
    colors: {
        myOwnColor: "#69da55",
    },
};

const colorsTheme = {
    bg: "blue",
};

const SafeArea = styled(SafeAreaView)`
    flex: 1;
    ${StatusBar.currentHeight && `margin-top: ${StatusBar.currentHeight}px`};
`;

const SearchContainer = styled.View`
    padding: ${(props) => props.theme.space[3]};
`;

const CategoryList = styled(FlatList).attrs({
    contentContainerStyle: {
        padding: 16,
    },
})``;

const Loading = styled(ActivityIndicator)`
    margin-left: -25px;
    background-color: colorsTheme.bg;
`;
const LoadingContainer = styled.View`
    position: absolute;
    top: 50%;
    left: 50%;
`;

export const CategoryScreen = () => {
    const { loading, error, categoryList } = useContext(CategoryContext);
    return (
        <SafeArea>
            {loading && (
                <LoadingContainer>
                    <Loading size={50} animating={true} style={{ backgroundColor: theme.colors.Green90 }} />
                </LoadingContainer>
            )}
            <SearchContainer>
                <Searchbar />
            </SearchContainer>
            <CategoryList
                data={categoryList}
                renderItem={({ item }) => {
                    //console.log("ITEMs", item);
                    return (
                        <Spacer position="bottom" size="large">
                            <CategoryInfoCard categoryList={item} />
                        </Spacer>
                    );
                }}
                keyExtractor={(item) => item.name}
            />
        </SafeArea>
    );
};

尝试通过style={{ backgroundColor: theme.colors.Green90 }}设置颜色，但未生效。

解决方案 #

1. 直接使用color属性（快速生效） #

你错误地使用了backgroundColor来设置Spinner颜色，react-native-paper的ActivityIndicator（Spinner）是通过color属性控制指示器颜色的，而非背景色。

修改Loading组件的调用代码：

<Loading size={50} animating={true} color="#69da55" />

如果想用你自定义的colors文件中的绿色：

<Loading size={50} animating={true} color={colors.Green90} />

2. 通过主题全局配置（统一风格） #

你的主题定义覆盖了DefaultTheme的colors对象，导致丢失了默认主题的颜色变量，且没有将组件包裹在PaperProvider中，主题无法生效。

步骤1：修正主题定义

扩展默认主题而非完全替换：

const theme = {
    ...DefaultTheme,
    myOwnProperty: true,
    colors: {
        ...DefaultTheme.colors, // 保留默认颜色
        primary: "#69da55", // 将主色设为绿色，Spinner默认会使用primary颜色
        myOwnColor: "#69da55",
    },
};

步骤2：用PaperProvider包裹组件

确保你的CategoryScreen被PaperProvider包裹（可以在根组件或当前屏幕中添加）：

// 修改CategoryScreen的导出
export const CategoryScreen = () => {
    const { loading, error, categoryList } = useContext(CategoryContext);
    return (
        <PaperProvider theme={theme}> {/* 添加这层包裹 */}
            <SafeArea>
                {/* 原有内容 */}
            </SafeArea>
        </PaperProvider>
    );
};

此时Spinner会自动使用主题中的primary颜色，无需单独设置color属性。

3. 结合styled-components配置 #

如果你想通过styled-components统一设置Loading组件的颜色，可以在attrs中指定：

const Loading = styled(ActivityIndicator).attrs({
    color: "#69da55", // 直接设置颜色
    // 或者用主题颜色（需确保组件在PaperProvider中）
    // color: props => props.theme.colors.primary,
})`
    margin-left: -25px;
`;

内容的提问来源于stack exchange，提问作者mightycode Newton