反应本机导航嵌套屏幕

Question

我的屏幕有 2 个标签

    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Main" component={Main}/>
        <Tab.Screen name="Chat" component={Chat}/>
      </Tab.Navigator>
    </NavigationContainer>

屏幕 Chat 非常简单并且有效 :

const Chat = () => {
  return (
    <View>
      <Text>Chat</Text>
    </View>
  );
};
export default Chat;

但在第一个屏幕中 Main 我有嵌套屏幕 Map

const Main = () => {
  return (
      <Map/>
  );
};

export default Main;

请告诉我嵌套屏幕是如何工作的，因为我有一个错误:

Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app

组件 Map:

export const Map = () => {
  return (
    <View style={styles.container}>
      <MapView
        provider={PROVIDER_GOOGLE} // remove if not using Google Maps
        style={styles.map}
        region={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.015,
          longitudeDelta: 0.0121,
        }}
      >
        <Marker
          title="title"
          description='descr'
          coordinate={{
            latitude: 37.78825,
            longitude: -122.4324,
          }}>
          <View style={{backgroundColor: "red", padding: 10}}>
            <Text>SF</Text>
          </View>
        </Marker>
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: '100%',
    width: '100%',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

Answer 1

问题出在错误的导入 MapView 上！

反应本机导航嵌套屏幕

react native navigation nested screen

navigation

react-native