IT技术 - react-native，如何在多个选项卡上分解代码 - 吾爱随笔录

我使用 react-native 创建 ios 和 android 应用

我创建了一个测试应用程序，其中 TabNavigator 运行良好，外加一个侧菜单（打开它的按钮应该在顶部操作栏中）和浮动操作按钮（图片上标记为 FAB 的红色圆圈）。所有这些代码都是在第一个选项卡上新定义的：app.js。

每个选项卡都有自己的带有代码和渲染的 js 文件。

我的问题是：

如何在所有选项卡上获取此侧边菜单、操作栏和浮动按钮，而无需处理所有其他选项卡 Js 文件上的所有渲染代码和 js 功能。

当我点击一个标签时，只有绿色部分会改变

我的 App.js

  import React, { Component } from "react";
  import {...} from "react-native";
  import { TabNavigator } from "react-navigation";
  import Imagetest from "./Photo";
  import ListFlatlist from "./ListFlatlist";
  ...  // importing the other file for the tabs

  import styles from "./css/styles";
  import SideMenu from "react-native-side-menu";
  import Menu from "./Menu";


  class App extends Component {
    constructor(props) { ...  }
    ... 


    render() {
      const menu = <Menu onItemSelected={this.onMenuItemSelected} />;
      return (
        <SideMenu
          menu={menu}
          isOpen={this.state.isOpen}
          onChange={isOpen => this.updateMenuState(isOpen)}
        >
          <View style={styles.container}>

           {/*  my app.js content

           */}  

          // this is floating buttons
          <ActionButton buttonColor="rgba(231,76,60,1)">
            <ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
              <Icon name="md-create" style={styles.actionButtonIcon} />
            </ActionButton.Item>
          </ActionButton>

          </View>
        </SideMenu>
      );
    }
  }

  const AppNavigator = TabNavigator(
    {
      H: { screen: App },
      f: { screen: ListFlatlist },
      Img: { screen: Imagetest },
      B: { screen: Buttonpage },
      S: { screen: ListSectionlist },
      F: { screen: Fetchpage }
    }  
  );

  export default AppNavigator;

如果为侧菜单、操作栏和 FAB 创建新组件，我必须将它们放在所有选项卡渲染上，这对我来说不是最干净的方式，但我现在看不到其他解决方案。