访问屏幕属性

Question

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

谢谢

Answer 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 函数来执行 short-circuit 类型的循环。由于这个函数被大量使用，我想尽量减少循环次数。考虑一下，我可能可以通过使用自定义字典对象来大大缩短它，然后通过 route 键访问图标信息，因为这些与从返回的 routeName 值匹配navigation.state.

访问屏幕属性

Accessing screen properties

react-native

react-native-tabnavigator