Строка состояния React Native Navigation под панелью навигации

Я использую библиотеку react-native-navigation в своем проекте, и у меня возникают проблемы со строкой состояния. Во-первых, я не могу изменить цвет фона строки состояния на iOS, поэтому я создал для этого следующий компонент:

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

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

const styles = StyleSheet.create({
 statusBar: {
    height: STATUSBAR_HEIGHT,
  }
});

Я импортирую этот компонент на весь экран следующим образом:

      <View>
         <S_StatusBar backgroundColor="#090b4b" barStyle="light-content" />
      </View>

Вот как я нажимаю на свой экран, используя библиотеку react-native-navigation:

pushProductDetailScreen = () => {
   this.props.navigator.push({
     screen: 'cfl.ProductDetail'
  });
};

Экран нажимается правильно, но теперь моя проблема в том, что моя строка состояния находится под моей панелью навигации, например:

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

Я не понимаю проблемы и почему это происходит!


react-native react-native-ios react-native-android react-native-navigation
person Huby03    schedule 01.02.2018    source источник
comment
Вы решили эту проблему?   -  person Rajitha Perera    schedule 15.03.2018

Ответы (2)


arrow_upward
1
arrow_downward

Вы создаете представление, инкапсулирующее что-то

<View style={[styles.statusBar, { backgroundColor }]}>
...
</View>

statusBar: {
  height: STATUSBAR_HEIGHT,
}

Таким образом, он создает представление с указанной высотой и фоновым цветом.

StatusBar — это немного другой компонент. Он ничего не отображает, но изменяет настройки вашего StatusBar.

Вы должны иметь возможность настроить его из самого представления.

<StatusBar
  backgroundColor="blue"
  barStyle="light-content"
/>
person Louis Lecocq    schedule 01.02.2018

arrow_upward
0
arrow_downward

Этот стиль работает для меня

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;

class App extends Component {
  render() {
    return (
      <View style={[styles.container]}>
         <View style={[styles.statusbar]}>
           <StatusBar barStyle="dark-content"/>
         </View>
         <WebView
           style={[styles.webview]}
           source={{ uri: "https://..." }}
        />    
      </View>
    );  
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  statusbar: {
    height: STATUSBAR_HEIGHT,
  },
  webview: {
    flex: 1,
  }
});
person luky    schedule 15.03.2019