<SafeAreaProvider> 가 <WebView>를 포함하면 안전영역이 작동하지 않음

Expo Development Tools
1

안녕하세요! 대한민국에서 expo로 앱을 만드려고 하는 제작자입니다.
제가 영어를 하지 못해 한글로 작성하는 점 양해바랍니다.
여러분이 이 글을 번역하여 읽으리라 믿습니다.
빠르게 문제를 말씀드리겠습니다.

로 작성하면 SafeAreaProvider 가 만들어주는 auto padding 이 작동하지 않습니다.

image

어떻게 하면 auto padding을 사용할 수 있을까요?

코드는 이렇게 작성했습니다.

참고 : useSafeAreaInsets 을 사용해보았습니다만, 해결되지 않았습니다.

3

useSafeAreaInsets 을 사용해보았습니다만, 해결되지 않았습니다.

image
image445×876 77.8 KB

4

Hi @kimrh

You can do it like this. I have included two ways to do it:

안녕하세요 @kimrh

이렇게 하면 됩니다. 두 가지 방법을 포함했습니다:

import { View } from 'react-native';
import { useSafeAreaInsets, SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { WebView } from 'react-native-webview';

// 예시 1
function SafeAreaWebView() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <WebView
        source={{ uri: 'http://example.com' }}
        usesCleartextTraffic={true}
      />
    </SafeAreaView>
  );
}

// 예시 2
function SafeAreaWebViewWithHook() {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ flex: 1, paddingTop: insets.top }}>
      <WebView
        source={{ uri: 'http://example.com' }}
        usesCleartextTraffic={true}
      />
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaWebView />
    </SafeAreaProvider>
  );
}
1 Like
5

thank you so much.
정말 고마워요.

import { getStatusBarHeight } from ‘react-native-status-bar-height’;
<SafeAreaProvider style={marginTop: getStatusBarHeight()}>

I didn’t have time, so I solved it like this. Next time, I’ll do what Woodin taught me!
시간이 없어서 이렇게 풀었습니다. 다음에는 wodin 이 가르쳐준 대로 해보겠습니다!

have a nice day!
좋은 하루 되세요!

I would appreciate it if you could cover the domain!
추신 : 도메인을 가려주실 수 있다면 감사하겠습니다!

6

I am glad you solved the problem.
문제를 해결해 주셔서 기쁩니다.

I am not sure what you mean by this. Are you asking for improved documentation about this subject?
무슨 뜻인지 잘 모르겠습니다. 이 주제에 대한 문서 개선을 요청하시는 건가요?

7

:grinning:

Domain is exposed.
I don’t want the domain exposed.
I would appreciate it if you could delete the domain.
Please.
도메인이 노출되어 있습니다.
저는 도메인이 노출되길 원하지 않습니다.
부디 도메인을 지워주시면 감사하겠습니다.
부탁드립니다.

8

Ok, I understand now :slight_smile: