Question

我使用react-native来创建ios和android app

我创建了一个测试应用程序，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创建新组件，我必须将它们放在所有选项卡渲染上，对我来说不是最干净的方式，但我现在还没有看到其他解决方案。

Answer 1

我在Github上放了一个示例回购。这实际上是它所需要的全部：

// @flow

import React, { Component } from "react";
import { View } from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";
import ActionButton from "react-native-action-button";

import Profile from "./Profile";
import Tab1View from "./Tab1";
import Tab2View from "./Tab2";
import Tab3View from "./Tab3";

const TabView = TabNavigator({
  tab1: { screen: Tab1View },
  tab2: { screen: Tab2View },
  tab3: { screen: Tab3View },
})

const Home = (props) => {
  return (
    <View style={{flex: 1}}>
      <TabView navigation={props.navigation} />
      <ActionButton offsetY={100} />
    </View>
  );
}

Home.router = TabView.router;

const StackView = StackNavigator({
  home: { screen: Home },
  profile: { screen: Profile },
});

export default class App extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <StackView />
      </View>
    );
  }
}

本机反应，如何在许多选项卡上分解代码

1 个答案: