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函数进行短路类型的循环。由于经常使用此功能，因此我想最大程度地减少循环次数。考虑一下，我可以通过使用自定义词典对象然后通过route键访问图标信息来大大缩短此时间，因为这些信息与从（）返回的routeName值匹配navigation.state。

访问屏幕属性

1 个答案: