[ React Native ] react-native-webview

상품관련된 부분을 api를 통해 html 태그를 통해서 받게되었다.

 

핸드폰 가로비율에 100%로 맞추고, 웹뷰안에서 네비게이팅을 하지않도록 작성했다

 

<WebView

style={{ height: Dimensions.get('window').height }}

originWhitelist={['*']}

source={{

html: html,

}}

onShouldStartLoadWithRequest={(event) => {

if (event.url.slice(0, 4) === 'http') {

Linking.openURL(event.url);

return false;

}

return true;

}}

setBuiltInZoomControls={false} // android prevent zoom

showsHorizontalScrollIndicator={false} //indicator 숨김

showsVerticalScrollIndicator={false} //indicator 숨김

/>

화면 100% 맞추는 작업은 html을 

 

const returnImageWidth100 = resultAws.replaceAll(

'<img ',

'<img width = "100%"',

);

const zoomDisable = `<meta name = "viewport" content="initial-scale=1.0, maximum-scale=1.0">`;

return zoomDisable + returnImageWidth100;

해당함수로 직접 변경해줘서 해결했다.