如何使用 mobx 变量设置 React-Navigation 选项卡导航器的样式

Question

我想我只是盯着这个太久了，现在我的大脑不工作了。我有 mobx 商店，其中一个包含基本主题颜色值。我想将它传递给我的 react-navigation 选项卡背景颜色，但我不知道该怎么做。我们正在使用 Typescript，这可能是让我感到困惑的部分原因，因为每次我尝试注入我的商店时，都会遇到一堆错误。

无论如何，如果有人可以帮助我弄清楚如何正确注入我的商店，或者将道具传递给我的 createMaterialTopTabNavigator 函数，我将不胜感激。

这是我的顶部标签导航器代码：

  export const SignedInWithGroup = createMaterialTopTabNavigator(
  {
    Home: {
      screen: MeetingStack,
      navigationOptions: {
        tabBarLabel: 'Advocacy Day',
        tabBarIcon: <Ionicons name="md-home" size={24} />,
      },
    },
    Legislators: {
      screen: Legislators,
      navigationOptions: {
        tabBarLabel: 'Legislators',
        tabBarIcon: <Ionicons name="ios-people" size={24} />,
      },
    },
    Messages: {
      screen: Messages,
      navigationOptions: {
        tabBarLabel: 'Messages',
        tabBarIcon: <Ionicons name="ios-chatboxes" size={24} />,
      },
    },
    Directory: {
      screen: DirectoryStack,
      navigationOptions: {
        tabBarLabel: 'Directory',
        tabBarIcon: <MaterialIcons name="contacts" size={24} />,
      },
    },
    More: {
      screen: MoreStack,
      navigationOptions: {
        tabBarLabel: 'More',
        tabBarIcon: <MaterialIcons name="more" size={24} />,
      },
    },
  },
  {
    tabBarPosition: 'bottom',
    tabBarOptions: {
      showIcon: true,
      style: {
        paddingTop: Platform.OS === 'android' ? 0 : 0,
        backgroundColor: "#CCBE00", //Replace with theme color
      },
      tabStyle: {
        padding: 0,
      },
      labelStyle: {
        marginTop: Platform.OS === 'ios' ? 8 : 0,
        marginBottom: Platform.OS === 'ios' ? 20 : 10,
        marginLeft: 15,
        fontSize: 7,
        color: 'white',
      },
    },
  }
);

export const createRootNavigator = (props:any, signedIn = false) => {
  console.log("Props");
  console.log(props);
  return createSwitchNavigator(
    { SignedInWithGroup: { screen: SignedInWithGroup }, SignedOut },
    { initialRouteName: signedIn ? 'SignedInWithGroup' : 'SignedOut' }
  );
};

这是我的 app.js 中的内容：

    const Layout = createRootNavigator(signedIn);
    return (
      <Provider {...stores}>
        <Layout />
      </Provider>
    );

Answer 1

解决方案

使用来自MaterialTopTabBar 的自定义标签栏。

1. 安装react-navigation-tabs 模块。因为，react-navigation 的 TabNaviagtion 来自 react-navigation-tabs。 (srcs)

   $ yarn install react-navigation-tabs

   或

   $ npm install react-navigation-tabs --save

2. 让您的自定义标签栏组件观察 store(MobX) 的 tabBarComponent 选项。我不会在 MobX 或 Redux 中编写相关代码。

import React, { Component } from 'react';
import { MaterialTopTabBar } from 'react-navigation-tabs';

// create a component
class TabBar extends Component {
  render() {
    return (
      <MaterialTopTabBar
        {...this.props}
        style={{ backgroundColor: 'green' }} // Replace with theme color. You should use observing variable from MobX or Redux. 
      />
    );
  }
}

//make this component available to the app
export default TabBar;

1. 在createMaterialTopTabNavigator 中应用您的自定义标签栏。

const TabNavigation = createMaterialTopTabNavigator(
  {
    Home: HomeScreen,
    Login: HomeScreen,
    Register: HomeScreen,
  },
  {
    tabBarComponent: (props) => { // Use your custom tabbar here. 
      return (
        <TabBar
          {...props}
        />
      );
    },
    tabBarPosition: 'bottom',
    tabBarOptions: {
      showIcon: true,
      style: {
        paddingTop: Platform.OS === 'android' ? 0 : 0,
      },
      tabStyle: {
        padding: 0,
      },
      labelStyle: {
        marginTop: Platform.OS === 'ios' ? 8 : 0,
        marginBottom: Platform.OS === 'ios' ? 20 : 10,
        marginLeft: 15,
        fontSize: 7,
        color: 'white',
      },
    },
  }
);

为什么？

正如我所写，react-navigation-tabs 基本上在react-navigation 中用作TabNavigation，当您createTabNavigator 时，您可以通过tabBarComponent 选项使用自定义视图

你可以使用一些mudules。

导航器

• createBottomTabNavigator
• createMaterialTopTabNavigator

观看次数

• 底部标签栏
• MaterialTopTabBar（你使用了这个视图）

实用程序

• createTabNavigator

因此，从BottomTabBar 或MaterialTopTabBar 扩展组件或制作自定义标签栏可能是一种简单的解决方案。