时间戳

首页 > 解决方案 > 如何在 TypeScript 中使用 defaultNavigationOptions 的属性？

typescript - 如何在 TypeScript 中使用 defaultNavigationOptions 的属性？

问题描述

当我们尝试在 Typescript 的 defaultNavigationOptions 中使用 tabBarLabel 属性时，我们会收到关于类型的错误。

我已经尝试了 Javascript 中的代码，但没有出现错误。如果我们只使用 barTabIcon 代码可以工作。

我已经安装了以下类型的库：'@types/react-navigation[...]' 但什么也没有。

我怎么解决这个问题？有任何想法吗？

import React, {Component} from 'react';
import {StyleSheet, Image, View} from 'react-native';
import {
  createAppContainer,
  createBottomTabNavigator

} from 'react-navigation';


import AccountScreen from '../tabmenu/AccountScreen';
import CarteScreen from '../tabmenu/CarteScreen';
import OperazioniScreen from '../tabmenu/OperazioniScreen';


const TabNavigator = createBottomTabNavigator({

    Account: {screen: AccountScreen},
    Carte: {screen: CarteScreen},
    Operazioni: {screen: OperazioniScreen}
 }, {
    defaultNavigationOptions: ({navigation}) => ({

            tabBarIcon: ({focused, horizontal, tintColor}) => {

                //inserire switch
                const {routeName} = navigation.state;
                if (routeName === 'Account') {
                    return (
                        <Image
                            source= . 
{require('../../../res/drawable/faq.png')}
                            style={{width: 20, height: 20,}}/>


                    );
                } else {
                    return (
                        <Image
                            source= . 
{require('../../../res/drawable/faq.png')}
                            style={{width: 20, height: 20}}/>
                    )
                }
            },

            tabBarLabel: ({focused, tintColor}) => {
                const {routeName} = navigation.state;
                let label;
                switch (routeName) {
            case 'Account':
            return label = focused ?<Text>Account</Text>:null;
            case 'Carte':
            return label = focused ? <Text >Carte</Text> :null;
            case 'Appointments':
            return label = focused ?<Text>Operazioni</Text> : null;

                }
                return label
            },


        }
    ),


   }
);

class HomeScreen extends Component {

    render() {

        return (

            <View style={styles.container}>

                <TabNavigator/>

            </View>
        );
    }
}


const styles = StyleSheet.create({
          [...]
});

export default createAppContainer(TabNavigator);

标签： typescriptreact-nativereact-navigation

解决方案

反应导航的类型非常复杂。并且可用性与 React 的类型不匹配。我花了太多时间来弄清楚类型，我希望没有人再这样做了。所以给你。

  • 的第二个参数createBottomTabNavigator()是类型
    BottomTabNavigatorConfig。
  • 它的属性defaultNavigationOptions是类型NavigationBottomTabScreenOptions或
(
  navigationOptionsContainer: NavigationScreenConfigProps & {
    navigationOptions: NavigationScreenConfig<NavigationBottomTabScreenOptions>;
  }
) => NavigationBottomTabScreenOptions

  • 此函数需要返回NavigationBottomTabScreenOptions您感兴趣的两个属性：

    • tabBarIcon类型的属性React.ReactElement<any>或
      (options: TabBarIconProps) => React.ReactElement<any> | null

    • tabBarLabel类型的属性stringorReact.ReactElement<any>或
      (options: TabBarLabelProps) => React.ReactElement<any> | string | null

这使您的函数tabBarIcon看起来像这样：

const tabBarIcon = (options: TabBarIconProps):React.ReactElement<any> => {
  const {focused, horizontal, tintColor} = options;
  const {routeName} = navigation.state;
  if (routeName === 'Account') {
    return <Image {...}/>;
  } else {
    return <Image {...}/>;
  }
}

和这样的功能tabBarLabel：

const tabBarLabel = (options:TabBarLabelProps):React.ReactElement<any>|null => {
  const {focused, tintColor} = options;
  const {routeName} = navigation.state;
  // I've removed the undefined variable "label" and added instead a default clause
  switch (routeName) {
    case 'Account':
      return label = focused ? (<Text>Account</Text>) : null;
    case 'Carte':
      return label = focused ? <Text >Carte</Text> : null;
    case 'Appointments':
      return label = focused ? <Text>Operazioni</Text> : null;
    default:
      return null;
  }
}

所以一旦这一切都结束了，我们就可以回到defaultNavigationOptions

const defaultNavigationOptions = (navigationOptionsContainer: NavigationScreenConfigProps):NavigationBottomTabScreenOptions => {
  return {
    tabBarIcon: tabBarIcon,
    tabBarLabel: tabBarLabel,
  }
}

然后添加缺少的导入，你应该完成。

推荐阅读