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

问题描述 投票:0回答:1

我试图让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>

如果我使用整数,那么错误消失,所以它可能只接受那些。有没有办法可以设置宽度与字符串的父级相同?

css string reactjs react-native jsx
1个回答
1
投票

你可以在return之前自己计算。例如:

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

然后在你的RkCardcropWidth中使用该值,例如:

<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的编写方式。

© www.soinside.com 2019 - 2024. All rights reserved.