iPhone X의 노치 색상을 React Native로 설정하는 방법

Question

iOS 시뮬레이터를 통해 iPhone X에서 내 애플리케이션을 테스트했습니다. 내 응용 프로그램 테마와 같은 색으로 검은 노치를 다시 칠할 수있는 방법을 알고 싶습니다.

가 어떻게 내 테마를 일치 파란색에 검은 색 줄을 변경합니까 :

여기에 현재 구현입니까?

Answer 1

Xcode를 사용하여 앱 실행 화면을 이미지 애셋에서 스토리 보드로 변경하면 문제가 해결됩니다.

Answer 2

참조 : 아이폰 X를 들어 How to set iOS status bar background color in React Native?

• 의 증가 StatusBarHeightIos 20 30-
나는 반응 - 네이티브 장치 정보 장치

import DeviceInfo from 'react-native-device-info';

// getModel: iPhone X // getDeviceId: iPhone10,3 const ModelIphoneX = 'iPhone X';

// StatusBarHeight is where Carrier info and date display at top // iPhone X has a cut-out in top of dispaly where sensor package is located. // For iPhone X increase height so cut-out does not hide text const StatusBarHeightIos = DeviceInfo.getModel() === ModelIphoneX ? 30 : 20; const StatusBarHeight = Platform.OS === 'ios' ? StatusBarHeightIos : 0;

을 감지하는 데 사용

스크린 샷 : 왼쪽의 iPhone X

Answer 3

당신의 의도가 상태 표시 줄 (시간 및 배터리 표시등이 표시되는 영역) 다음이 문제가 될 수있는 색상을 경우 당신은 단순히 반응 네이티브 새 버전 (51)

import { 
    ... 
    SafeAreaView 
} from 'react-native'; 
class Main extends React.Component { 
render() { 
    return (
    <SafeAreaView style={styles.safeArea}> 
     <App /> 
    </SafeAreaView> 
    ) 
} 
} 
const styles = StyleSheet.create({ 
..., 
safeArea: { 
    flex: 1, 
    backgroundColor: '#FF5236' 
} 
})