如何在不使用 React Native 中的字符串的情况下将宽度 (100%) 设置为与父级相同？

Question

我试图使cropWidth与其父级宽度相同，但是当我使用字符串时，我收到此错误：unrecognized selector sent to instance.这是代码：

<RkCard style={{width:'80%',  marginLeft: 40,  marginBottom: 50, backgroundColor:'#f5f5f5', position:'relative',  shadowColor: 'black', shadowOffset: {width: 10, height: 10}, shadowOpacity: 1, shadowRadius: 2, elevation: 5}}>
<ImageZoom cropWidth={'100%'} <-- string here, error is thrown
cropHeight={300}
imageWidth={300}
imageHeight={300}
style={{left: 0, alignSelf:'center', justifyContent: 'center', alignItems: 'center', backgroundColor:'#D3D3D3',}}>
<FastImage rkCardImg source={{uri:`https://www.example.com/profiles/uploads/${item.images}`,
headers:{ Authorization: 'someAuthToken' },
priority: FastImage.priority.high,
}}
resizeMode={FastImage.resizeMode.contain}
style={{width: '100%', height: 300, left: 0, alignSelf:'center', justifyContent: 'center', alignItems: 'center'}}/>
</ImageZoom>
</RkCard>

如果我使用整数，那么错误就会消失，因此它可能只接受这些。有没有办法用字符串将宽度设置为与父级相同？

Answer 1

您可以在return之前自己计算。 例如：

let width = Dimensions.get('window').width * .8;

然后在您的RkCard和cropWidth中使用该值，例如：

<RkCard style={{width,  marginLeft: 40,  marginBottom: 50, backgroundColor:'#f5f5f5', position:'relative',  shadowColor: 'black', shadowOffset: {width: 10, height: 10}, shadowOpacity: 1, shadowRadius: 2, elevation: 5}}>
<ImageZoom cropWidth={width} 

顺便说一句，问题不在于 React Native 风格问题，而在于ImageZoom的编写方式。