设置状态栏时视图隐藏

Question

我有一个组件，它有一个 flex: 1 视图，带有一个状态栏组件和一个子组件，当状态栏元素不存在时，指示器会显示，但是当我添加状态栏元素时，指示器会消失隐藏，请问如何在添加状态栏时显示指示器，是什么让它隐藏

使用状态栏（指示器隐藏）

没有状态栏（指示器显示）

代码

儿童组件（开启）

import {BoxShadow} from 'react-native-shadow';

export default class On extends Component {
render() {
    const shadowOpt = {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height / 10,
        color: "#000",
        border: 10,
        opacity: '0.15',
        radius: 20,
        x: 0,
        y: 5,
    }
    const dimensions = Dimensions.get('window');
    const Height = (dimensions.height);
    const Width = dimensions.width;
    return (
        <View style={{flex: 1}}><View name="indicator" style={{flexDirection: 'row',}}>
            <View style={{backgroundColor: '#cbcdda', width: Width, height: Height / 60}}>
            </View>
            <View style={{
                backgroundColor: '#EFB879',
                width: (this.state.width),
                height: Height / 60,
                position: 'absolute'
            }}>
            </View>
        </View>
            <ViewPagerAndroid
                onPageSelected={this.onPageSelected.bind(this)}
                ref={(viewPager) => {
                    this.viewPager = viewPager
                }}
                style={{height: Height - ((Height / 30) + (Height / 10))}}
                initialPage={0}>
                <View style={{
                    backgroundColor: 'white',
                    alignItems: 'center',
                    alignSelf: 'center',
                    justifyContent: 'center',
                    flexDirection: 'column'
                }} key="1">
                    <Image style={{marginBottom: 50,}} source={require('../on1.png')}/>
                    <Text style={{
                        fontFamily: 'mont',
                        color: '#000',
                        fontSize: 22,
                        letterSpacing: 0.5,
                        marginBottom: 12
                    }}>
                        Welcome to Sẹlẹ
                    </Text>
                    <Text style={{
                        fontFamily: 'mont',
                        color: '#615D5D',
                        fontSize: 16,
                        letterSpacing: 1,
                        textAlign: 'center'
                    }}>
                        Hire services and buy and sell {'\n'} on Sẹlẹ
                    </Text>
                </View>
                <View style={{
                    backgroundColor: 'white',
                    alignItems: 'center',
                    alignSelf: 'center',
                    justifyContent: 'center',
                    flexDirection: 'column'
                }} key="2">
                    <Image style={{marginBottom: 50, width: '35%', height: '35%'}}
                           source={require('../sele2.png')}/>
                    <Text style={{
                        fontFamily: 'mont',
                        color: '#000',
                        fontSize: 22,
                        letterSpacing: 0.5,
                        marginBottom: 12
                    }}>
                        With Sẹlẹ, you can
                    </Text>
                    <Text style={{
                        fontFamily: 'mont',
                        color: '#615D5D',
                        fontSize: 16,
                        letterSpacing: 1,
                        textAlign: 'center'
                    }}>
                        Hire services and buy and sell {'\n'} on Sẹlẹ
                    </Text>
                </View>
                <View style={{
                    backgroundColor: 'white',
                    alignItems: 'center',
                    alignSelf: 'center',
                    justifyContent: 'center',
                    flexDirection: 'column'
                }} key="3">
                    <Text style={{
                        fontFamily: 'mont',
                        color: '#000',
                        fontSize: 22,
                        letterSpacing: 0.5,
                        marginBottom: 12
                    }}>
                        Select your School
                    </Text>
                    <Text style={{
                        fontFamily: 'mont',
                        color: '#615D5D',
                        fontSize: 16,
                        letterSpacing: 1,
                        textAlign: 'center'
                    }}>
                        You've made it this far {'\n'} select your school on the next page {'\n'} and let's get
                        started
                    </Text>
                </View>
            </ViewPagerAndroid>
            <BoxShadow setting={shadowOpt}>
                <View style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    flex: 1,
                    backgroundColor: 'white',
                }}>
                    <TouchableNativeFeedback>
                        <Text style={{
                            fontSize: 18,
                            marginLeft: 25,
                            fontFamily: 'mont',
                            color: '#615D5D',
                            marginBottom: 10
                        }}>Skip</Text>
                    </TouchableNativeFeedback>
                    <View style={{flexDirection: 'row'}}><View
                        style={{marginRight: 14, alignSelf: 'center'}}>
                        <View style={this.state.no == "0" ? styles.selected : styles.unselected}>
                        </View>
                    </View>
                        <View style={{marginRight: 14}}>
                            <View
                                style={this.state.no == "1" ? styles.selected : styles.unselected}>
                            </View>
                        </View>
                        <View
                            style={this.state.no == "2" ? styles.selected : styles.unselected}>
                        </View></View>
                    <TouchableNativeFeedback onPress={this.update.bind(this)}>
                        <Text style={{
                            fontFamily: 'mont',
                            color: '#EFB879',
                            fontSize: 18,
                            marginRight: 25,
                            marginBottom: 10
                        }}>Next</Text>
                    </TouchableNativeFeedback>
                </View>
            </BoxShadow>
        </View>
    );
}
}

父元素

export default class Parent extends Component {
constructor(props) {
    super(props);
    this.state = {
        timePassed: false,
    };
}
render() {
        return (
            <View style={{flex: 1}}>
                <StatusBar backgroundColor='#EE8F62' translucent={true} barStyle='light-content'/><On/>
            </View>
        );

    }
}

Answer 1

android 也遇到过类似问题，我们就是这样处理的，也许这会帮助您找到更好的解决方案。

您需要创建一个 const 并将状态栏大小指定为一个值。

const NAVBAR_HEIGHT = Platform.select({
  ios: { marginTop: 0 },
  android: { marginTop: window.height / 8 }
});

那么在样式部分应该添加这一行，

marginTop: NAVBAR_HEIGHT.marginTop

这样，

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#E7EBF0",
    marginTop: NAVBAR_HEIGHT.marginTop
  }
});

这就是我们为应用程序创建状态栏的方式，

<View style={styles.container}>
        {/* if ios status bar will be added to the screen */}
        {Platform.OS === "ios" ? (
          <Statusbar backgroundColor="#000000" barStyle="light-content" />
        ) : null}
</View>