В настоящее время я работаю над проектом React Native для Android. Теперь я создал TabNavigator с помощью React Navigations createMaterialTopTabNavigator
, который отображает две вкладки:
Было бы неплохо использовать этот 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
. Выдает следующую ошибку:
Я уже пробовал подход, который предлагается здесь < / а>.