底部导航|反应本机

Question

我使用react-native-paper实现底部导航。

我有一个BottomNav元素。它位于应用程序的主页-Feed页上。当我单击BottomNav中的图标转到MapScreen页面时，什么都没有发生。帮助解决问题。

BottomNav

import React from "react";
import { StyleSheet } from "react-native";
import { BottomNavigation } from "react-native-paper";
import {  MapScreen } from "../screens/";



export default class BottomNav extends React.Component {
  state = {
    index: 0,
    routes: [
      { key: "Feed", title: "Feed", icon: "photo-album", color: "#6200ee" },
      { key: "MapScene", title: "MapScene", icon: "inbox", color: "#2962ff" }
    ]
  };

  render() {
    return (
      <BottomNavigation
        style={styles.BottomNav}
        navigationState={this.state}
        onIndexChange={index => this.setState({ index })}
        renderScene={BottomNavigation.SceneMap({
          Feed: MapScreen,
          MapScene: MapScreen
        })}
      />
    );
  }
}

MapScreen

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import { HeaderProfile } from "../uikit/";

export default class MapScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: "bookmark-border"
    };
  }

  render() {
    return (
      <View style={styles.MapScreen}>
        <View style={styles.Header}>
          <HeaderProfile />
        </View>

        <Text> Text </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  MapScreen: {
    backgroundColor: "#1f1f1f",
    height: "100%",
    flex: 1,
    width: "100%"
  },
  Header: {
    marginTop: 24
  }
});
export { MapScreen };