Question

好吧，所以我为ImageBackground获得了以下组件（使用typescript但应该是不言自明的）。（这是反应原生的）

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.js：22）在SignInEmailPage（由Route创建）在Route中（由withRouter（SignInEmailPage）创建） inRouter（SignInEmailPage）（由Route创建）在路线（在_Onboarding.js：44）在Switch中（在_Onboarding.js：43）在RCTView（在View.js：71）在视图中（在createAnimatedComponent.js：147）在AnimatedComponent中（在OnboardingRouteAnimation.js：33）在OnboardingRouteAnomation（在_Onboarding.js：42）在RCTView（在View.js：71）在视图中（在ImageBackground.js：68）在ImageBackground中（由Styled（ImageBackground）创建）在Styled（ImageBackground）（在_Onboarding.js：32）在Onboarding（由Route创建）在Route中（由withRouter（Onboarding）创建） in withRouter（Onboarding）（在index.js：20）在LayoutIndex中（由Route创建）在Route中（由withRouter（LayoutIndex）创建） inRouter（LayoutIndex）（在index.js：13）在路由器中（由MemoryRouter创建）在MemoryRouter中（在NativeRouter.js：11）在NativeRouter中（在index.js：12）在Provider中（在index.js：11）在App中（在renderApplication.js：35）在RCTView（在View.js：71）在视图中（在AppContainer.js：102）在RCTView（在View.js：71）在视图中（在AppContainer.js：122）在AppContainer中（在renderApplication.js：34）

Answer 1

我知道这是一个较晚的答案，但是对于遇到相同问题的任何人：

为componentWillMount提供<script type="text/javascript"> function validate() { var x3 = document.getElementsByName("hobbies[]"); var values= ""; for(var i = 0; i < x3.length; i++) { if(x3[i].checked) { if(x3[i].value==''){ alert('No blank values allowed'); return false; } else{ values+= x3[i].value+','; } } } window.open('https://quiet-odyssey-258110.appspot.com/?hobbies[]='+values+'','mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); } }道具（甚至像style这样的空道具）也可以解决问题。

无法读取未定义的属性'width'（style.width）

1 个答案: