React Native Navigator / stack屏幕渲染无关

Question

我遵循了反应本机导航的文档在这里，并让我的程序正常设置为没有错误的地方。我什至有一个＆lt; errorBoundary＆gt;包装器。但是，当没有错误并且一切正常工作时，我在屏幕上什么都没有，但是空格都没有。我有一个加载到堆栈导航器中的组件，但它不是渲染的。看看我的app.js文件...

export default function App() {
  
  const Stack = createNativeStackNavigator();

  const TestPage = () => {
    return(
      <View style={{flex: 1, backgroundColor: 'red'}}>
        <Text style={{fontSize: 20, color: 'black'}}>SAMPLE TEXT</Text>
        <Text style={{fontSize: 20, color: 'black'}}>SAMPLE TEXT</Text>
        <Text style={{fontSize: 20, color: 'black'}}>SAMPLE TEXT</Text>
        <Text style={{fontSize: 20, color: 'black'}}>SAMPLE TEXT</Text>
        <Text style={{fontSize: 20, color: 'black'}}>SAMPLE TEXT</Text>
      </View>
    )
  }

  return(
    <ErrorBoundary>
      <NavigationContainer>
        <KeyboardAvoidingView>
{/* ------------------------------------------------------------------------------ */}
          <View style={{flex: 1, backgroundColor: 'green'}}>
            <Stack.Navigator screenOptions={{headerShown: false}}>

              <Stack.Screen name="/" >
                {props => <TestPage />}
              </Stack.Screen>

            </Stack.Navigator>
          </View>
{/* ------------------------------------------------------------------------------ */}
        </KeyboardAvoidingView>
      </NavigationContainer>
    </ErrorBoundary>
  )
}

请注意，我不相信这是由于我没有明确创建主页，因为如果那是问题，我会像以前一样收到错误消息。它知道它应该呈现测试组件，但什么也不会出现。有什么想法吗？

Answer 1

导航器或堆栈没有错，它是应用程序返回的主视图组件。
该代码看起来像这样...

return(
    <ErrorBoundary>
      <NavigationContainer>
        <KeyboardAvoidingView>
{/* ------------------------------------------------------------------------------ */}
          <View style={{flex: 1, backgroundColor: 'green'}}>
             // Other Stuff
          </View>
{/* ------------------------------------------------------------------------------ */}

当它看起来像这样...

return(
    <ErrorBoundary>
      <NavigationContainer>
        <KeyboardAvoidingView>
{/* ------------------------------------------------------------------------------ */}
          <View style={{height: '100%, width: '100%}}>
             // Other Stuff
          </View>
{/* ------------------------------------------------------------------------------ */}

这是因为基本view不能使其样式变得flex，因为它也没有相对，因此需要更明确地使屏幕的大小。