为什么内容没有显示在 react-navigation 组件中？

Question

Why is content not showing in react-navigation component?

I am using react-navigation and I am trying to display the content of, but the content is not displayed

Im used styled-components/native

My code:

const Stack = createStackNavigator();

const Screens = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

Home:

export const Home = () => {
  return (
    <HomeContainer>
      <Text>Hello world!</Text>
    </HomeContainer>
  );
};

This also does not work, the result is the same as in the screenshot:
const Home = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red' }}>
      <Text>Hello world!</Text>
    </View>
  );
};

export default Home;

Answer 1

I created a working snack demo you can check that here.

https://snack.expo.io/@raajnadar/react-navigation-setup-with-styled-component

You are using multiple navigation containers that is wrong. If you want to use multiple navigation containers you need to configure them properly and make sure you have a proper use case for that.

https://reactnavigation.org/docs/navigation-container/