Question

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

Answer 1

反应导航的类型非常复杂。而且可用性与React的类型不匹配。我花了太多时间弄清楚类型，希望其他人不必再做一次。所以你去。

createBottomTabNavigator()的第二个自变量的类型为
BottomTabNavigatorConfig。
其属性defaultNavigationOptions的类型为NavigationBottomTabScreenOptions或

(
  navigationOptionsContainer: NavigationScreenConfigProps & {
    navigationOptions: NavigationScreenConfig<NavigationBottomTabScreenOptions>;
  }
) => NavigationBottomTabScreenOptions

此函数需要返回NavigationBottomTabScreenOptions，它具有您感兴趣的两个属性：
- 类型为tabBarIcon或
  的属性React.ReactElement<any> (options: TabBarIconProps) => React.ReactElement<any> | null
- 类型为tabBarLabel或string或
  的属性React.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,
  }
}

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

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

1 个答案: