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

Есть ли место в реале собственного родного кода iOS, который я мог бы изменить, чтобы установить iOS statusbar backgroundColor? RCTRootView.m?

реагировать на собственный компонент StatusBar поддерживает только backgroundColor только для Android.

Операционная система iOS позволяет настроить строку состояния backgroundColor

Моя цель - иметь более темный цвет строки состояния. Пример

Ответы

Ответ 1

iOS не имеет понятия строки состояния bg. Вот как вы достигнете этого кросс-платформенным способом:

import React, {
  Component,
} from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  StatusBar,
  Platform,
} from 'react-native';

const MyStatusBar = ({backgroundColor, ...props}) => (
  <View style={[styles.statusBar, { backgroundColor }]}>
    <StatusBar translucent backgroundColor={backgroundColor} {...props} />
  </View>
);

class DarkTheme extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MyStatusBar backgroundColor="#5E8D48" barStyle="light-content" />
        <View style={styles.appBar} />
        <View style={styles.content} />
      </View>
    );
  }
}

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;
const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  statusBar: {
    height: STATUSBAR_HEIGHT,
  },
  appBar: {
    backgroundColor:'#79B45D',
    height: APPBAR_HEIGHT,
  },
  content: {
    flex: 1,
    backgroundColor: '#33373B',
  },
});

AppRegistry.registerComponent('App', () => DarkTheme);

simulator

Ответ 2

Добавьте import { StatusBar } from 'react-native'; в начало вашего app.js, а затем добавьте StatusBar.setBarStyle('light-content', true); в качестве первой строки в render(), чтобы изменить текст строки состояния/значки на белый.

Другие параметры цвета: 'default' и 'dark-content'.

Подробнее см. https://facebook.github.io/react-native/docs/statusbar.html.

Кроме этого: нет, вам нужно будет следовать приведенной вами ссылке.

Ответ 3

Если вы используете response-native-navigation, вам необходимо:

1-) Добавьте это в ваш файл info.plist:

<key>UIViewControllerBasedStatusBarAppearance</key>
<string>YES</string>

2-) В первой строке вашей функции render(), например:

  render(){
    this.props.navigator.setStyle({
      statusBarTextColorScheme: 'light'
    });
    return (
      <Login navigator={this.props.navigator}></Login>
    );
  }

В этом примере ваша строка состояния преобразуется в светлый цвет текста/кнопок/значков. enter image description here