React导航和纸张的主题在屏幕背景上不起作用
React导航和纸张的主题在屏幕背景上不起作用
提问于 2021-11-29 21:16:21
我使用的主题来自the本地导航和the土著纸，在一些配置之后，所有的东西都可以工作，标题，文本，标题等等，除了屏幕的背景。
我使用了Stack Navigator、底部Tab Navigator和Tab，并且只有在Tab屏幕上才能处理背景色主题。在Stack和底部Navigator的其他屏幕中，背景总是白色的，文本是黑色的。
我正在用PaperProvider和NavigationContainer包装所有东西，下面是一些代码：
定制主题：
import {
DefaultTheme as PaperDefaultTheme,
DarkTheme as PaperDarkTheme
} from 'react-native-paper';
import {
DefaultTheme,
DarkTheme
} from '@react-navigation/native';
const CustomDefaultTheme = {
...DefaultTheme,
...PaperDefaultTheme,
colors: {
...DefaultTheme.colors,
...PaperDefaultTheme.colors,
primary: '#A16E2E'
}
}
const CustomDarkTheme = {
...DarkTheme,
...PaperDarkTheme,
colors: {
...DarkTheme.colors,
...PaperDarkTheme.colors,
primary: '#F9CA2E',
card: '#000',
background: '#000',
border: '#FFFFFF',
}
}
export { CustomDefaultTheme, CustomDarkTheme }适用主题：
export default MainApp = () => {
const [isDarkTheme, setIsDarkTheme] = useState(false)
const myFunction = useMemo(() => ({
toggleTheme: () => {
setIsDarkTheme(isDarkTheme => !isDarkTheme)
}
}))
const theme = isDarkTheme ? CustomDefaultTheme : CustomDarkTheme
return(
<PaperProvider theme = {theme}>
<myContext.Provider value = {myFunction}>
<NavigationContainer theme = {theme}>
<Stack_LoginRegister />
</NavigationContainer>
</myContext.Provider>
</PaperProvider>
)
}注意:在我添加myContext.Provider之前就存在问题，所以这不是问题所在。
带顶部Tab导航器的屏幕，与堆栈和底部Tab Navigator嵌套的屏幕
只带堆栈导航器的屏幕
这就是为什么背景色只适用于屏幕上的TopTab导航器。我希望有人能帮我。非常感谢!
回答 1
Stack Overflow用户
发布于 2022-02-11 21:11:11
也许我来的太晚了。我认为您的问题是您没有从导航中导入主题。您还可以使用PaperDarkTheme进行导航。
import * as React from 'react';
import { NavigationContainer, DarkTheme } from '@react-navigation/native';
import {
DarkTheme as PaperDarkTheme,
Provider as PaperProvider,
} from 'react-native-paper';
export default function Main() {
return (
<PaperProvider theme={PaperDarkTheme}>
<NavigationContainer theme={DarkTheme}>
{/* content */}
</NavigationContainer>
</PaperProvider>
);
}来源：回波导航
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70161410
复制相关文章
相似问题
腾讯云开发者
