React Native header吧

Question

如何配置 Android header 條形背景顏色類似於 ios 與反應原生？

謝謝

Answer 1

您可以使用StatusBar （ https://reactnative.dev/docs/statusbar ）

import { StatusBar } from 'react-native';
// ...
StatusBar.setBackgroundColor("#000000");

Answer 2

用這個

<StatusBar backgroundColor="yellow" />

有關更多信息，請閱讀此

Answer 3

好問題！

您可以使用 react-native 狀態欄標簽：

只需這樣做：

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


class MyStatusbar extends Component {

    render() {
        return (
            <View style={styles.StatusBar}>
                <StatusBar translucent barStyle = "light-content" />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    StatusBar: {
        height: Constants.statusBarHeight,
        backgroundColor: '#6a11cb'
    }
});

export default MyStatusbar;

以及您希望狀態欄使用的位置：

import MyStatusbar from './file-location'

並在 return(); ：

<MyStatusbar />