Как установить цвет выреза на iPhone X в React Native

Я тестировал свое приложение на iPhone X через iOS Simulator. Я хотел бы знать, как я могу перекрасить черную выемку в тот же цвет, что и тема моего приложения.

Вот текущая реализация:

введите здесь описание изображения

Как изменить черную полосу на синюю в соответствии с моей темой?


react-native react-native-ios javascript iphone-x
person Dan    schedule 21.09.2017    source источник
comment
Если вы намерены раскрасить строку состояния (область, где отображаются индикаторы времени и батареи), этот вопрос может вам помочь. Я удаляю свой текущий ответ, так как он не актуален   -  person Ramesh    schedule 21.09.2017
comment
Дэн, взгляните на мой ответ здесь /questions/46318395/ Надеюсь, это решит вашу проблему (нижняя часть относится к CSS)   -  person Adrian    schedule 22.09.2017
comment
Ответ можно найти здесь: stackoverflow.com/questions/39297291/   -  person Ed of the Mountain    schedule 01.11.2017

Ответы (3)


arrow_upward
9
arrow_downward

Вы можете просто использовать SafeAreaView из реактивной новой версии 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'
 }
})
person Bhargav Patel    schedule 13.12.2017
comment
Это работает как шарм, вы спасли мой день! - person elaineee; 30.04.2021

arrow_upward
2
arrow_downward

См.: Как установить цвет фона строки состояния iOS. в React Native?

  • Для iPhone X увеличение StatusBarHeightIos с 20 до 30
  • Я использую react-native-device-info для обнаружения устройства

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 слева

введите здесь описание изображения

person Ed of the Mountain    schedule 31.10.2017

arrow_upward
1
arrow_downward

Это исправляется путем изменения экрана запуска приложения с изображений на раскадровку с помощью XCode.

person Bataleon    schedule 31.10.2017