728x90
- react-native-webview 설치하기
npm i react-native-webview
- 간단한 사용 예시
import React from 'react';
import {StyleSheet, View, Text} from 'react-native';
import {WebView} from 'react-native-webview';
const INJECTED_JAVASCRIPT = `(function() {
window.ReactNativeWebView.postMessage(JSON.stringify(window.location));
})();`;
const runFirst = `
document.body.style.backgroundColor = '#eeddcc';
setTimeout(function() { window.alert('hello world') }, 2000);
true;
`;
function TestWebView() {
return (
<View style={styles.container}>
<WebView
source={{uri: 'https://naver.com'}}
style={styles.webView}
// injectedJavaScript={INJECTED_JAVASCRIPT}
injectedJavaScript={runFirst}
onMessage={() => console.log('On Message')}
/>
<View style={styles.sampleView}>
<Text>VIEW 1</Text>
</View>
</View>
);
}
export default TestWebView;
const styles = StyleSheet.create({
container: {
flex: 1,
},
webView: {
margin: 20,
flex: 1,
},
sampleView: {
flex: 1,
backgroundColor: 'skyblue',
},
});
- 또는 웹뷰 컴포넌트에 ref를 연결할 수 있다.
- useRef 훅을 통해서 웹뷰에 ref를 연결하고, 직접 웹뷰 컴포넌트를 조작하는 방법을 사용할 수도 있다.
공식 깃허브 : https://github.com/react-native-webview/react-native-webview#readme
GitHub - react-native-webview/react-native-webview: React Native Cross-Platform WebView
React Native Cross-Platform WebView. Contribute to react-native-webview/react-native-webview development by creating an account on GitHub.
github.com
시작하기 : https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md
GitHub - react-native-webview/react-native-webview: React Native Cross-Platform WebView
React Native Cross-Platform WebView. Contribute to react-native-webview/react-native-webview development by creating an account on GitHub.
github.com
728x90
'React Native' 카테고리의 다른 글
React Native에서 ethers.js 라이브러리 설정하기 (0) | 2022.12.26 |
---|---|
react-native-config를 사용해서 env 설정하기 (+ ios 캐싱 문제 해결) (0) | 2022.12.20 |
react-native-image-picker를 사용하여 카메라 사용, 이미지 선택하기 (1) | 2022.11.19 |
React Native의 Animated 사용하기 (0) | 2022.11.16 |
React Native Routing 설정 (react-navigation 사용하기) (0) | 2022.11.13 |