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

Question

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

1

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

Здесь текущая реализация:

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

Dan 21 сен. 2017, в 12:33

Источник

0

Если вы хотите покрасить строку состояния (область, где отображаются индикаторы времени и заряда батареи), этот вопрос может помочь. Я удаляю свой текущий ответ, так как он не актуален
Ramesh 21 сен. 2017, в 11:19
0

Дэн, взгляни на мой ответ здесь stackoverflow.com/questions/46318395/… Надеюсь, он решит твою проблему (нижняя часть относится к CSS)
Adriani6 22 сен. 2017, в 11:25
0

Ответ можно найти здесь: stackoverflow.com/questions/39297291/…
Ed of the Mountain 31 окт. 2017, в 21:16

Показать ещё 1 комментарий

Теги:

javascript

react-native

react-native-ios

iphone-x

3 ответа

Ещё вопросы

Если вы хотите покрасить строку состояния (область, где отображаются индикаторы времени и заряда батареи), этот вопрос может помочь. Я удаляю свой текущий ответ, так как он не актуален
Дэн, взгляни на мой ответ здесь stackoverflow.com/questions/46318395/… Надеюсь, он решит твою проблему (нижняя часть относится к CSS)
Ответ можно найти здесь: stackoverflow.com/questions/39297291/…

Bhargav Patel · Answer 1 · 2017-12-13T07-17-00.000Z

Вы можете просто использовать 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'
 }
})

Ed of the Mountain · Answer 2 · 2017-10-31T20-00-00.000Z

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

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

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

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

//StatusBarHeight - это где информация о несущей и дата отображаются наверху. //iPhone X имеет вырез в верхней части диспетчера, где расположен пакет датчиков. // Для iPhone X увеличиваем высоту, поэтому вырезание не скрывает текст const StatusBarHeightIos = DeviceInfo.getModel() === ModelIphoneX? 30: 20; const StatusBarHeight = Platform.OS === 'ios'? StatusBarHeightIos: 0;

Скриншот: iPhone X слева

Bataleon · Answer 3 · 2017-10-31T10-56-00.000Z

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