Question

我正在构建一个React Native应用程序，并且正在使用React Navigation V2处理导航。

我从the documentation的字面上复制了以下代码：

const MainTabs = createBottomTabNavigator(
  { Home: HomeStack, Settings: SettingsStack },
  {
    navigationOptions: ({ navigation }: NavigationScreenProps) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "Home") {
          iconName = `ios-information-circle${focused ? "" : "-outline"}`;
        } else if (routeName === "Settings") {
          iconName = `ios-options${focused ? "" : "-outline"}`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      }
    }),
    tabBarOptions: {
      activeTintColor: "tomato",
      inactiveTintColor: "gray"
    }
  }
)

由于某种原因打字稿会引发以下错误：

[ts]
Argument of type '{ navigationOptions: ({ navigation }: any) => { tabBarIcon: ({ focused, tintColor }: { tintColor: string | null; focused: boolean; }) => Icon; }; }' is not assignable to parameter of type 'BottomTabNavigatorConfig'.
  Types of property 'navigationOptions' are incompatible.
    Type '({ navigation }: any) => { tabBarIcon: ({ focused, tintColor }: { tintColor: string | null; focused: boolean; }) => Icon; }' is not assignable to type 'NavigationBottomTabScreenOptions | ((navigationOptionsContainer: NavigationScreenConfigProps & { navigationOptions: NavigationScreenProp<NavigationRoute<NavigationParams>, NavigationParams>; }) => NavigationBottomTabScreenOptions) | undefined'.

那怎么可能？我在做什么错了？

Answer 1

根据道具的期望，您可能还需要在表达式中强制转换要传递的内容。像这样：

int apiLevel = Build.VERSION.SDK_INT;
String versionRelease = Build.VERSION.RELEASE;

switch(apiLevel){
case 9:
case 10:
case 11:
case 12:
case 13:
case 14:
case 15:
    sMaxAllowed = 100;
    sCheckPeriod = 3600000;
    break;
case 16:
    sMaxAllowed = 30;
    sCheckPeriod = 1800000;
    break;
case 17:
    sMaxAllowed = 30;
    if(versionRelease.contains("4.2.2")){
        sCheckPeriod = 60000;
    }else {
        sCheckPeriod = 1800000;
    }
    break;
case 18:
    sMaxAllowed = 30;
    sCheckPeriod = 60000;
    break;
default:
    sMaxAllowed = 30;
    sCheckPeriod = 1800000;
    break;
}
sMaxAllowed = sMaxAllowed - 2; //This is to give us a little buffer to be extra safe (like a condom ;)
Log.d(TAG, "maxAllowed = "+sMaxAllowed+"; checkPeriod = "+(sCheckPeriod/60000) + " minutes");

Answer 2

以我的经验，反应导航在navigationsOptions属性类型方面存在问题。此处的解决方案是~~为库创建适当的类型~~，以非常具体地说明您拥有的类型。

据我所知，弱点是TextInputLayout inputLayout = findViewById(R.id.textInputLayout); inoutLayout.setHint("Hint");函数参数类型。向要解压缩的参数添加显式类型：

tabBarIcon

返回类型应该自动派生。

Answer 3

注意：options={loginHeader as StackHeaderOptions}

const AuthStack = createStackNavigator()
export default () => (
   <AuthStack.Navigator screenOptions={navigationHeader}>
      <AuthStack.Screen name={Routes.LOGIN} component={Login} options={loginHeader as StackHeaderOptions} />
      <AuthStack.Screen name={Routes.CHAT.INFO} component={Info} />
      <AuthStack.Screen name={Routes.CHAT.FLOW} component={ChatFlow} />
   </AuthStack.Navigator>
)

const loginHeader = ({ navigation }) => ({
   title: 'Login',
   headerRight: () => (
       <HeaderButton
          imageSource={IMG_INFO}
          onPress={() => navigation.navigate('Info')}
       />
   )
})

https://www.linkedin.com/in/mehdiparsaei/

React Navigation TypeScript：类型...的参数不能分配给类型“ BottomTabNavigatorConfig”的参数

3 个答案: