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！

反应本机导航嵌套屏幕

1 个答案: