访问屏幕属性答案

【问题标题】：Accessing screen properties访问屏幕属性
【发布时间】：2019-07-17 17:00:55
【问题描述】：

我正在尝试使用 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" />;
        },
      })

谢谢

【问题讨论】：

标签： react-native react-native-tabnavigator

【解决方案1】：

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

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 键访问图标信息，因为这些与从navigation.state 返回的routeName 值匹配。

【讨论】：