如何使用defaultNavigationOptions'；使用TypeScript的属性是什么？

当我们尝试在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);

import React，{Component}来自'React'；
从“react native”导入{样式表、图像、视图}；
进口{
createAppContainer，
CreateBoottomTabNavigator
}从“反应导航”；
从“../tabmenu/AccountScreen”导入AccountScreen；
从“../tabmenu/CarteScreen”导入CarteScreen；
从“../tabmenu/OperazioniScreen”导入OperazioniScreen；
const TabNavigator=createBottomTabNavigator({
帐户：{screen:AccountScreen}，
点菜：{screen:CarteScreen}，
Operazioni:{屏幕：OperazioniScreen}
}, {
defaultNavigationOptions:（{navigation}）=>({
tabBarIcon:（{聚焦、水平、着色}）=>{
//插入开关
const{routeName}=navigation.state；
如果（routeName==‘帐户’）{
返回(
);
}否则{
返回(
)
}
},
tabBarLabel:（{focused，tintColor}）=>{
const{routeName}=navigation.state；
让标签；
交换机（路由名称）{
“账户”案例：
返回标签=聚焦？科目：空；
“点菜”案例：
返回标签=聚焦？点菜：空；
个案"委任":
返回标签=聚焦？操作：空；
}
退货标签
},
}
),
}
);
类主屏幕扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
[...]
});
导出默认createAppContainer（TabNavigator）；

react导航的类型非常复杂。而且可用性与React的类型不匹配。我花了太多的时间才弄清楚这些类型，我希望其他人不要再这样做了。好了，给你

• createBottomTabNavigator（）

  的第二个参数的类型为
  

  BottomTabNavigatorConfig

• 其属性

  defaultNavigationOptions

  的类型为

  NavigationBottomTabScreenOptions

  或

函数

tabBarLabel

如下所示：

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

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;
  }
}

然后添加缺少的导入，就可以完成了

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;
  }
}

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