Передача реквизита из компонента в TabNavigator - React-Navigation - PullRequest
Новая
       100

Передача реквизита из компонента в TabNavigator - React-Navigation

1 голос
/ 16 января 2020

В настоящее время я работаю над проектом React Native для Android. Теперь я создал TabNavigator, используя React Navigations createMaterialTopTabNavigator, который отображает две вкладки:

enter image description here

Было бы неплохо использовать этот TabNavigator в качестве повторно используемого компонента , Поэтому я пытаюсь передать реквизиты от компонента, который вызывает навигатор. К сожалению, я не могу понять, как правильно передать реквизит.

Это компонент, который вызывает TabNavigator (здесь он называется TwoTabsHorizontal): 

import React from 'react';
import {View, StyleSheet} from 'react-native';

import {withNavigation} from 'react-navigation';

import Background from '../../atoms/Background/Background';
import TwoTabsHorizontal from '../../molecules/TwoTabsHorizontal/TwoTabsHorizontal';

class Main extends React.Component {
  render() {
    return (
      <View style={styles.view}>
        <Background background={true} title="Find Dogs" />
        <TwoTabsHorizontal
          headingLeftTab="criteria"
          headingRightTab="names"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  view: {
    backgroundColor: '#151414',
    height: '100%',
  },
});

export default withNavigation(Main);

И это TabNavigator TwoTabsHorizontal: 

import React from 'react';
import {View, StyleSheet} from 'react-native';

import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
import {createAppContainer} from 'react-navigation';

import TestScreen1 from '../../../screens/TestScreen1';
import TestScreen2 from '../../../screens/TestScreen2';

const TabNavigator = ({headingLeftTab}) =>
  createMaterialTopTabNavigator(
    {
      One: {
        screen: TestScreen1,
        navigationOptions: {
          tabBarLabel: {headingLeftTab},
        },
      },
      Two: {
        screen: TestScreen2,
        navigationOptions: {
          tabBarLabel: 'Names',
        },
      },
    },
    {
    },
  );

export const TwoTabsHorizontal = createAppContainer(TabNavigator);

Как Вы видите, я пытаюсь передать реквизит headingLeftTab с Main до TwoTabsHorizontal, чтобы использовать его в качестве метки в navigationOptions. Это дает следующую ошибку:

enter image description here

Я уже попробовал подход, который предлагается здесь .

...