反应原生 Typescript Touchableopacity 道具错误

编程问答 2022-04-24

问题描述

我使用 Styled 组件和 Typescript 创建了一个可重复使用的按钮。我使 onPress 无效。我正在使用此按钮到 headStyles。 HeaderStyles 有一个单一的道具名称 headerLeft。 headerLeft's props' onPress 是可选的或未定义的。当我将此道具传递给我的 Button 时，我按预期收到了 Typescript 错误。这是错误：Type '(() => void) | undefined' is not assignable to type '() => void'. Type 'undefined' is not assignable to type '() => void'.ts(2322)。有什么办法可以让我在新闻上的 headerLeft 道具无效？

这是我可重复使用的 Button 组件：

import React from 'react';
import styled from 'styled-components/native';


type Props = {
  onPress: () => void;
};
const BackButtonContainer = styled.TouchableOpacity`
  padding-vertical: 16px;
  padding-horizontal: 24px;
`;

const Button = ({ onPress }: Props) => {
  return (
    <BackButtonContainer
      onPress={onPress}>
   
    </BackButtonContainer>
  );
};

export default Button;

这是headerStyles

import { StackNavigationOptions } from '@react-navigation/stack';
import React from 'react';
import Button from './buttons;

export const headerStyles: StackNavigationOptions = {
  headerStyle: {
    elevation: 0,borderBottomWidth: 0,shadowOffset: { height: 0,width: 0 },},headerTitleAlign: 'center',headerTintColor: colors.greyGradient[800],headerLeft: (props) =>
    props.canGoBack ? <Button onPress={props.onPress} /> : null,//In here I am getting typescript error

};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

onpressreact-nativetouchableopacitytypescripttypescript