1

我正在试验 React Natives createBottomTabNavigator。我目前正在渲染文档中显示的屏幕。我希望通过使用图标来扩展它，但我想以不同于文档中所示的方式进行操作。

对于每个屏幕，我都在定义一个navigationProperty对象，其中包含一个图标和其他信息。

我将我的定义tabNavigator如下：

export default createBottomTabNavigator({
    About: { 
        screen: AboutScreen
    },
    LoyaltyCard: { 
        screen: LoyaltyCardScreen 
    },
    Contact: { 
        screen: ContactScreen 
    },
});

我希望使用该defaultNavigationOptions属性来添加图标，而不是在函数中定义它们我希望使用每个屏幕中定义的属性。为了理解，这里是AboutScreen代码。

class AboutScreen extends React.Component {    

    navigationOptions = {
        tabBarLabel: 'About',
        tabBarIcon: 'md-checkmark-circle'
    };

    render() {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>About!</Text>
          </View>
        );
    }     
}

正如我们在上面的代码示例中看到的，我在navigationOptions对象中定义了两个属性。标签和图标。我的问题是，如何在defaultNavigationOptions配置中使用这些定义的属性？这甚至可能吗？

这是我目前的配置：

defaultNavigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, tintColor }) => {
            console.log(focused)
            return <Ionicons name={navigation.tabBarIcon} size={24} color="green" />;
        },
      })

谢谢

4

1 回答 1

0

所以，我最终通过在每个屏幕之外创建一个配置对象来解决这个问题。它看起来像这样：

iconInformation = [
    {
        'route': 'About', 
        'default': 'md-help-circle', 
        'focused': 'md-help-circle-outline'
    },
    {
        'route': 'LoyaltyCard', 
        'default': 'ios-ribbon', 
        'focused': 'md-ribbon'
    },
    {
        'route': 'Contact', 
        'default': 'ios-information-circle', 
        'focused': 'ios-information-circle-outline'
    }
]

我使用它如下：

defaultNavigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, tintColor }) => {
            iconName = ''
            const { routeName } = navigation.state;
            iconInformation.some(function(iconData)  {
                if(routeName === iconData.route) {
                    iconName = focused ? iconData.focused : iconData.default;
                    return true;
                }
            });
            return <Ionicons name={iconName} size={24} color="green" />;
        },
      })

我使用该some功能进行短路型循环。由于此功能被大量使用，我想尽量减少循环次数。考虑一下，我可能可以通过使用自定义字典对象来缩短它，然后通过route键访问图标信息，因为这些与routeName从navigation.state.

于 2019-07-18T15:46:49.357 回答