Question

我在多个位置使用相同的代码，对于每个屏幕，我都有一个使用react-navigation v3.0的BottomTabNavigator。

问题是我需要通过TabNigator（目前可以正常工作）将道具从父组件传递到子组件，这就是为什么我要为每个屏幕创建单独的TabNavigator。

有没有一种方法可以优化我的代码？也许导出我的TabNavigator？

import Chrono from "../../../assets/tools/Chrono"
import Session from "./Session"
import Resultats from "./Resultats"

constructor(props) {
        super(props)
        this.state = {
            myPath: 'DeveloppeCouche',
        }
        this.AppContainer = createAppContainer(this.TabNavigator)
    }

TabNavigator = createBottomTabNavigator({
        MainPage, // current page with some text and pictures of the exercice
        Chrono,
        Session: { screen: () => <Session myPath={this.state.myPath} /> },
        Resultats: { screen: () => < Resultats myPath={this.state.myPath} /> }
    }, {
            defaultNavigationOptions: ({ navigation }) => ({
                tabBarIcon: ({ tintColor }) => {
                    const { routeName } = navigation.state;
                    let IconComponent = Ionicons;
                    let iconName;
                    if (routeName === 'MainPage') {
                        iconName = 'md-home';
                    } else if (routeName === 'Chrono') {
                        iconName = 'md-time';
                    } else if (routeName === 'Session') {
                        iconName = 'md-save';
                    } else if (routeName === 'Resultats') {
                        iconName = 'md-analytics';
                    }
                    return <IconComponent name={iconName} size={25} color={tintColor} />;
                },
            }),
            tabBarOptions: {
                activeTintColor: 'red',
                inactiveTintColor: 'gray',
            },
        })

我正在为自己的论文构建健身应用程序。我的应用程序中有很多不同的练习，并且这些代码经常重复使用。有任何线索吗？

有什么办法可以在单独的组件中导出defaultNavigationOptions？

0 个答案: