React Native
webviewExample
composeWebview
description
step1title
step1subtitle1
shell
npm install @react-navigation/native
step1subtitle2
shell
npm install @react-navigation/native-stack
step1subtitle3
shell
npm install react-native-screens react-native-safe-area-context
step1subtitle4
shell
npx pod-install ios
step2title
step2subtitle
step2-1title
step2-1description
step2-2title
step2-2description
typescript
// App.tsx
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import HomeScreen from '@screens/home';
import LauncherScreen from '@screens/launcher';
const Stack = createNativeStackNavigator();
export type RootStackParam = {
launcher: undefined;
banner: {url: string};
};
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="launcher" component={LauncherScreen} />
<Stack.Screen name="banner" component={BannerScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
step2-3title
step2-3description
shell
npm i react-native-webview
step2-3description2{step2-3launcherUrl}step2-3description2-1
- step2-3description2list1
- step2-3description2list3
- step2-3description2list3-1
- step2-3description2list3-2
typescript
// src/screens/launcher/Launcher.tsx
import { WebView } from 'react-native-webview';
import { useRef } from 'react';
export default function Launcher() {
const webviewRef = useRef<any>();
...
return (
...
<WebView
ref={webviewRef}
source={{
uri: {런처 URL},
headers: {'Cache-Control': 'no-cache'},
}}
onMessage={onMessage}
onContentProcessDidTerminate={() => {
// webview reload
webviewRef.current?.reload();
}}
javaScriptEnabled={true}
/>
...
)
}
step3title
step3subtitle
step3subtitle2
Type | Description |
|---|---|
closeLauncher | item1 |
typescript
// src/screens/launcher/Launcher.tsx
import {WebView, WebViewMessageEvent} from 'react-native-webview';
export default function Launcher() {
// WebView에서 보내온 메세지 처리
const onMessage = (e: WebViewMessageEvent) => {
const {type, inviteCode, infoMessage, link}
= JSON.parse(e.nativeEvent.data);
switch (type) {
case 'closeLauncher':
closeLauncher();
break;
}
};
return (
<View>
<WebView
...
onMessage={onMessage}
...
/>
</View>
);
}
1. closeLauncher()
step3-1subtitle
typescript
// src/screens/launcher/Launcher.tsx
// 런처 종료
const closeLauncher = () => {
if (navigation.canGoBack()) {
navigation.goBack();
}
};
step4title
step4subtitle
shell
npm install --save react-native-orientation-locker
- step4list1
- step4list2
- step4list2-1
- step4list2-2
typescript
// 추가
import Orientation from 'react-native-orientation-locker';
export default function Launcher() {
...
// 추가
useEffect(() => {
// 화면 방향을 세로로 고정합니다.
Orientation.lockToPortrait();
return () => {
// clean-up에서 다른 스크린에 영향 없도록 Orientations 해제
Orientation.unlockAllOrientations();
};
}, []);
return (
<View>
<WebView ... />
</View>
);
}
objectivec
// AppDelegate.m or AppDelegate.mm
// 추가
@implementation AppDelegate
...
// 추가
- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
return [Orientation getOrientation];
}
...
@end
footerTitle
"[Client Admin] footerMessage
v1.0.7