为什么我的顶级反应本机组件不会扩展到完整尺寸？

Question

我正在使用 next.js 如果这很重要，我的 pages/_app.tsx 有：

function MyApp({ Component, pageProps }: AppProps) {

    return (
        <PaperProvider theme={customTheme}>

            <View style={{ flex: 1, top: 0, left: 0, height: '100%', width: '100%', zIndex: 10, position: 'absolute', backgroundColor: 'red' }}>
                <Text> Here</Text>
            </View>
        </PaperProvider>
    )
}

export default MyApp

和customTheme是：

import { DefaultTheme } from 'react-native-paper';

export const customTheme = {
    ...DefaultTheme,
    dark: false,
    colors: {
        ...DefaultTheme.colors,
        primary: '#247BA0',
        accent: '#70C1B3',
        error: '#FF1654',
        disabled: '#F3FFBD',
        placeholder: '#D3EDBE',
    }
}

我看到了 Text，但没有红色背景。我错过了什么？

Answer 1

好的，这里的问题是将 position: 'absolute' 与 height: '100%' 一起使用，删除样式对象中的这些属性之一，它应该可以工作。如果你想让全屏有背景色，把height: '100%'改为height: Dimensions.get("window").height

为什么我的顶级反应本机组件不会扩展到完整尺寸？

Why won't my top level react-native component expand to the full dimensions?

react-native

next.js

react-native-paper