如何定制React纸喷丝头的颜色?

sauutmhj  于 2023-02-19  发布在  React
关注(0)|答案(1)|浏览(96)

我试着把旋转器的颜色定制成绿色。但是颜色还是紫色。不管我怎么试。
所以我有这个:

/* 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 }}

成立地点:https://callstack.github.io/react-native-paper/theming.html
但是旋转器的颜色保持紫色。而不是绿色。
问:用React纸改变纺丝机的颜色?

v8wbuo2f

v8wbuo2f1#

您正在尝试为ActivityIndicator给予一个backgroundColor,而该ActivityIndicator在其属性中不存在,以更改微调器的颜色,您需要使用color属性
<ActivityIndicator animating={true} color={'red'} />
您可以检查此sandbox

相关问题