如何使用mobx变量为React-Navigation标签导航器设置样式

Question

我想我凝视了太久了，现在我的大脑不起作用了。我有mobx商店，其中一个商店提供基本的主题颜色值。我想将其传递给我的“反应导航”选项卡背景色，但是我不知道该怎么做。我们正在使用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模块。因为，反应导航的TabNaviagtion来自react-navigation-tabs。 （srcs）

   $毛线安装react-navigation-tabs

   或

   $ npm install react-navigation-tabs-保存

2. 使您的自定义标签栏组件遵循商店（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基本上在TabNavigation中用作react-navigation，并且当您tabBarComponent createTabNavigator选项使用自定义视图>

您可以使用一些用法说明。

导航器

• createBottomTabNavigator
• createMaterialTopTabNavigator

观看次数

• BottomTabBar
• MaterialTopTabBar（您使用过此视图）

实用程序

• createTabNavigator

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