Отображение компонента в контейнере другого компонента

#react-native #flexbox

Вопрос:

Я хочу отобразить свой компонент QRCodeScanner внутри представления другого компонента с определенной высотой и шириной. Компонент удержания сканера QR-кода является

 lt;QRCodeScanner  onRead={onSuccess}  cameraType={"front"}  reactivate={false}  reactivateTimeout={5000}  bottomContent={  lt;Text style={styles.centerText}gt;  {t("Scan your")}  {"n"} {t("QR Code")}  lt;/Textgt;  }  cameraStyle={{  height: "100%",  }}  /gt;   

Компонент, в котором я хочу отобразить, выглядит следующим образом :

 return (  lt;LinearGradient  colors={["#536aeb", "#004c93"]}  style={{  display: "flex",  flexDirection: "column",  height: "100%",  justifyContent:  orientation === "LANDSCAPE" ? "space-between" : "flex-start",  alignItems: "center",  }}  gt;  lt;View style={{ width: "100%", flex: 1 , display: "flex", flexDirection: "column", alignItems:'flex-start',justifyContent: 'center', }}gt;  lt;View style={{width: "100%", height: "30%",display: "flex", flexDirection: "row", alignItems: 'flex-start', justifyContent: 'center', marginTop: 100, backgroundColor:'white'}}gt;  lt;QrCodeScanner navigation={props.navigation} /gt;  lt;/Viewgt;  lt;View style={{display: 'flex', flexDirection:'row', justifyContent: 'flex-end', alignItems:'flex-end', borderColor: 'white',position: 'absolute', bottom: 0, right:0}}gt;  lt;View style={{padding: 10, backgroundColor:'white' }}gt;  lt;QRCode  value={JSON.stringify({  c: 'altData.companyId',  })}  size={100}  /gt;  lt;/Viewgt;  lt;/Viewgt;  lt;/Viewgt;   lt;View style={{ width: "100%" }}gt;  lt;Footer /gt;  lt;/Viewgt;  lt;/LinearGradientgt;  )  

Но для этого требуется полный рост, который я хочу ограничить определенным размером. Как я могу этого достичь !

Комментарии:

1. Вы пытались изменить стиль камеры на определенную высоту?