自定义主题不应用于react-native-elements组件



我已经创建了一个自定义主题并将其传递给ThemeProvider,但是它还没有应用到react-native-element组件。我使用的是react-native-elements版本4.0.0-rc。下面是我的代码:

自定义主题
import { createTheme } from '@rneui/themed';
export const theme = createTheme({
lightColors: {
primary: 'red',
background: '#fff',
platform: {
web: {
primary: 'red',
},
},
},
darkColors: {
primary: 'red',
background: '#000',
platform: {
web: {
primary: 'red',
},
},
},
mode: 'light',
});

App.tsx

import { ThemeProvider } from '@rneui/themed';
import { registerRootComponent } from 'expo';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Root from './Root';
import { theme } from './themed';
function App() {
return (
<SafeAreaProvider>
<ThemeProvider theme={theme}>
<Root />
</ThemeProvider>
</SafeAreaProvider>
);
}
export default registerRootComponent(App);

Root.tsx

import { Button } from '@rneui/base';
import { useTheme, useThemeMode } from '@rneui/themed';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
export default function Root() {
const { theme } = useTheme();
const { mode, setMode } = useThemeMode();
return (
<SafeAreaView style={styles.container}>
<Text>Hello world!</Text>
<Button
color="primary"
title={'Click me'}
size="md"
radius={'md'}
onPress={() => setMode(mode === 'dark' ? 'light' : 'dark')}
/>
<StatusBar style="auto" />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
text: {
marginTop: 10,
},
});

结果结果

按钮必须有红色背景,而不是默认的蓝色。我应该把主题传递给Button的道具吗?这样的


export default function Root() {
const { theme } = useTheme();
const { mode, setMode } = useThemeMode();
return (
<SafeAreaView style={styles.container}>
<Text>Hello world!</Text>
<Button
theme={theme}
color="primary"
title={'Click me'}
size="md"
radius={'md'}
onPress={() => setMode(mode === 'dark' ? 'light' : 'dark')}
/>
<StatusBar style="auto" />
</SafeAreaView>
);
}

我希望我的自定义主题在默认情况下应用于所有组件,而不是总是必须将主题传递给其prop。有人能帮忙吗?

您需要从"@rneui/themed"而不是base

相关内容

  • 没有找到相关文章

最新更新