Как оформить навигатор на вкладке React-Navigation с помощью переменной mobx - PullRequest
Новая
       11

Как оформить навигатор на вкладке React-Navigation с помощью переменной mobx

0 голосов
/ 03 октября 2018

Я думаю, что я слишком долго смотрел на это, и теперь мой мозг не работает.У меня есть магазины 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>
    );

1 Ответ

0 голосов
/ 04 октября 2018

Решение

Используйте пользовательскую панель вкладок из MaterialTopTabBar.

  1. Установите модуль react-navigation-tabs.Потому что TabNaviagtion реагирующей навигации от react-navigation-tabs.( srcs )

    $ установка пряжи react-navigation-tabs

    или

    $ установка в минуту react-navigation-tabs - сохранение

  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;
Примените вашу пользовательскую панель вкладок в 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 (Вы использовали это представление)

Utils

  • createTabNavigator

Таким образом, расширение компонента или создание пользовательской вкладки из BottomTabBar илиMaterialTopTabBar может быть одним из простых решений.

...