iPhone X로 SafeAreaView의 상단과 하단에 다른 색상을 갖는 방법

Nov 26 2020

이 질문 은 이미 답변 되었지만 제안 된 솔루션이 더 이상 작동하지 않습니다.

return (
  <Fragment>
    <SafeAreaView style={{ flex:0, backgroundColor: 'red' }} />
    <SafeAreaView style={{ flex:1, backgroundColor: 'gray' }}>
      <View style={{ flex: 1, backgroundColor: 'white' }} />
    </SafeAreaView>
  </Fragment>
);

나에게 줄 것 :

대신 제공 :

보시다시피보기 순서는 동일하지 않습니다.

iOS에서도 같은 문제가 있습니다.

나는 react을 사용 16.13.1하고 있습니다. 아마도 마지막 답변 이후로 변경된 것이 있습니까?

내 대안은 무엇입니까?

감사

답변

1 MoreFoam Nov 26 2020 at 04:26

다음은 React 16.13.1을 사용하여 나를 위해 일했습니다.

return (
        <Fragment>
            <SafeAreaView style={{flex: Platform.OS === "android" ? 0.03 : 0, backgroundColor: "red"}}/>
            <View style={{flex: 1, backgroundColor: "white"}}/>
            <SafeAreaView style={{flex: Platform.OS === "android" ? 0.03 : 0, backgroundColor: "gray"}}/>
        </Fragment>
    );

iOS 스크린 샷 :

Android 스크린 샷 :

LuckyPal Nov 26 2020 at 04:55

내 경험상 StatusBar에서 react-native나를 위해 잘 작동했습니다. 예:

import { StatusBar } from 'react-native';

return (<Fragment>
    <StatusBar
        backgroundColor="#f00"
        barStyle="light-content"
    />
<Fragment>);

건배.