Как установить ширину (100%) так же, как ее родитель, без использования строки в React Native?

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.