我试着把旋转器的颜色定制成绿色。但是颜色还是紫色。不管我怎么试。
所以我有这个:
/* 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纸改变纺丝机的颜色?
1条答案
按热度按时间v8wbuo2f1#
您正在尝试为
ActivityIndicator
给予一个backgroundColor
,而该ActivityIndicator
在其属性中不存在,以更改微调器的颜色,您需要使用color
属性<ActivityIndicator animating={true} color={'red'} />
您可以检查此sandbox