无法读取undefined(style.width)的属性'width'

Question

好吧,所以我得到了以下组件(使用打字稿,但应该是自我解释)ImageBackground.(这是反应原生的)

import * as React from "react";
import { ImageBackground, ImageURISource } from "react-native";
import { width as deviceW } from "../services/device";

type Props = {
  width: number;
  ratio: number;
  unit: "px" | "%";
  source: ImageURISource;
};

class AspectRatioBackground extends React.Component<Props> {
  render() {
    const { width, ratio, unit, ...props } = this.props;
    let w = width;
    let h = width * ratio;
    if (unit === "%") {
      w = deviceW * (width / 100);
      h = deviceW * (width / 100) * ratio;
    }
    console.log(w, h);
    return <ImageBackground style={{ width: w, height: h }} {...props} />;
  }
}

export default AspectRatioBackground;

它正在被这样使用

    <AspectRatioBackground
      source={pressed ? activeBackgroundUrl : backgroundUrl}
      width={55}
      unit="%"
      ratio={0.2946}
    >
      <View pointerEvents="none">
        <String>{children}</String>
      </View>
    </AspectRatioBackground>

该控制台日志返回正确的数字值,即100和200,但由于某些原因,我收到以下错误:

TypeError:无法读取未定义的属性"width"

此错误位于:ImageBackground(在AspectRatioBackground.js:25中)在AspectRatioBackground(在Button.js:61)中的TouchableWithoutFeedback(在Button.js:60)中的Button(在SignInEmailPage.:s:22中)在SignInEmailPage中(已创建)在路由(由withRouter(SignInEmailPage)创建)中的路由(由Route创建)(由Route创建)在Route(在_Onboarding.js:44)的RCTView(在_Onboarding.js:43)中(在View.js上) :71)在AnimatedComponent(at OnboardingRouteAnimation.js:33)中的View(atAnboardingRouteAnimation.js:33)中OnboardingRouteAnomation(位于_Onboarding.js:42)的RCTView(在View.js:71中)在View中(在ImageBackground.js) :68)在ImageBackground中(由Styled(ImageBackground)创建)在Styled(ImageBackground)(在_Onboarding.js:32中)Onboarding(由Route创建)在Route(由withRouter(Onboarding)创建)inRouter(Onboarding)中(在index.js:20)在RouteIndex(由Route创建)中的Route(由withRouter(LayoutIndex)创建)inRouter(LayoutIndex)(在index.js:13)i n路由器(由MemoryRouter创建)在MemoryRouter(在NativeRouter.js:11中)在NativeRouter(在index.js:12)的Provider(在index.js:11)在App(在renderApplication.js:35)的RCTView中( at View.js:71)in View(at AppContainer.js:102)in RCTView(at View.js:71)in View(at AppContainer.js:122)in AppContainer(at renderApplication.js:34)

Answer 1

我知道这是一个迟到的答案，但对于遇到同样问题的人来说：

提供一个style道具ImageBackground（甚至像 一样的空道具<ImageBackground style={{}}.../>）可以解决这个问题。