如何从顶层取代状态栏？ [英] How to from top that replaces status bar?

查看：104
本文介绍了如何从顶层取代状态栏？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在React Native iOS中，我想滑入和滑出< View /> - 假设它是这样实现的 - 就像下面的图片一样。

解决方案

结果如下：



下面是完整的代码来使它工作。它不适用于RNPlay，因为zIndex在它们的版本中不受支持。

 从'react中导入React，{Component} ; 
导入{
 AppRegistry，
样式表，
文本，
状态栏，
查看，
 TouchableHighlight，
动画
）来自'反应原生'; 
 
类操场扩展组件{
构造函数（道具）{
 super（道具）; 
 this.state = {
 slideAnimation：new Animated.Value（22），
}; 
 
 
 _showNotification（）{
 StatusBar.setHidden（true，'slide'）; 
 
 Animated.timing（
 this.state.slideAnimation，
 {toValue：0，duration：300} 
）.start（）; 
 
 
 _hideNotification（）{
 StatusBar.setHidden（false，'slide'）; 
 
 Animated.timing（
 this.state.slideAnimation，
 {toValue：22，duration：300} 
）.start（）; 
 
 $ b $（b 
 $返回（
< View style = {styles.container}> 
< StatusBar 
 barStyle =default
 /> 
< Animated.View style = {[styles.notification，{top：this.state.slideAnimation}]}> 
<文字样式= {styles.notificationText}>这是一个通知< / Text> 
< /Animated.View> 
< View style = {styles.body}> 
< TouchableHighlight onlay = {（）=> {this._showNotification（）}}> 
< Text style = {styles.buttonText}> 
显示通知
< / Text> 
< / TouchableHighlight> 
 
< TouchableHighlight underlayColor =＃D1EEFCstyle = {styles.button} onPress = { => {this._hideNotification（）}}> 
< Text style = {styles.buttonText}> 
隐藏通知
 < /文本和GT; 
< / TouchableHighlight> 
< / View> 
< / View> 
）; 
 
 
 $ b $ const style = StyleSheet.create（{
 container：{
 flex：1，
 backgroundColor：'＃F5FCFF '，
}，
 body：{
 flex：1，
 justifyContent：'center'，
 alignItems：'center'，
 backgroundColor：' ＃F5FCFF'，//这是隐藏通知的重要因素，因为它实际上在它后面
 marginTop：22，//这将在顶部产生相同高度的差距，以便通知可以滑入
}，
按钮：{
 padding：10，
 borderColor：'＃D1EEFC'，
 borderWidth：2，
 borderRadius：5， 
 marginBottom：22，
}，
 buttonText：{
 fontSize：17，
 textAlign：'center'，
 color：'＃007AFF'
}，
通知：{
 backgroundColor：'black'，
位置：'absolute'，
 top：22，//向下移动通知以设置场景。
剩下：0，
右：0，
 height：22，//将它与状态栏的高度相同
 zIndex：0，//这是通知在容器背后的原因
}，
 notificationText：{
 color：'yellow'，
 textAlign：'center'，
 fontSize：11，
 marginTop：4 
}，
}）; 
 
 AppRegistry.registerComponent（'playground'，（）=> playground）;





UPDATE



我已经设法通过在视图内使用样式溢出来隐藏通知来实现掩蔽概念：'hidden'。容器被设置为高度：22.因此，如果通知移动了1pt，它看起来好像通知在后台滑动。



这里是结果是：



< img src =https://i.stack.imgur.com/ouIUI.gifalt =在这里输入图片描述>



以下是代码： 

 从'react'导入React，{Component}; 
导入{
 AppRegistry，
 StyleSheet，
文本，
 StatusBar，
视图，
 TouchableHighlight，
动画，
 Image 
} from'react-native'; 
 
类操场扩展组件{
构造函数（道具）{
 super（道具）; 
 this.state = {
 slideAnimation：new Animated.Value（22），
}; 
 
 
 _showNotification（）{
 StatusBar.setHidden（true，'slide'）; 
 
 Animated.timing（
 this.state.slideAnimation，
 {toValue：0，duration：300} 
）.start（）; 
 
 
 _hideNotification（）{
 StatusBar.setHidden（false，'slide'）; 
 
 Animated.timing（
 this.state.slideAnimation，
 {toValue：22，duration：300} 
）.start（）; 
} 
 
 render（）{
 return（
< View style = {styles.container}> 
< Image source = {require （'./img/splash.png'）} style = {styles.backgroundImage} resizeMode ='cover'/> 
< StatusBar 
 barStyle =default
 /> 
< View style = {styles.notificationContainer}> 
< Animated.View style = {[styles.notification，{top：this.state.slideAnimation}]}> 
 < Text style = {styles.notificationText}>这是通知< / Text> 
< /Animated.View> 
< / View> 
< TouchableHighlight underlayColor = ＃D1EEFCstyle = {styles.button} onPress = {（）=> {this._showNotification（）}}> 
< Text style = {styles.buttonText}> 
显示通知
< / Text> 
< / TouchableHighlight> 
 
< TouchableHighlight underlayColor =＃D1EEFCstyle = {sty les.button} onPress = {（）=> {this._hideNotification（）}}> 
< Text style = {styles.buttonText}> 
隐藏通知
< / Text> 
< / TouchableHighlight> 
< / View> 
）; 
 
 
 $ b $ const style = StyleSheet.create（{
 container：{
 flex：1，
 backgroundColor：'＃F5FCFF '，
 justifyContent：'center'，
 alignItems：'center'，
}，
 backgroundImage：{
 position：'absolute'，
 top ：0，
}，
按钮：{
 padding：10，
 borderRadius：5，
 marginBottom：22，
 backgroundColor：'＃FFFFFF88' ，
}，
 buttonText：{
 fontSize：17，
 textAlign：'center'，
 color：'＃000000'
}，
 notificationContainer：{
 position：'absolute'，
 top：0，
 left：0，
 right：0，
 height：22，
 $ overflow：'hidden'//这是做掩码的魔术：
}，
 notification：{
 backgroundColor：'＃00000088'，
 position：'absolute '，
 top：22，
剩下：0，
右：0，
高度：22，
}，
n otificationText：{
 color：'yellow'，
 textAlign：'center'，
 fontSize：11，
 marginTop：4 
}，
}） ; 
 
 AppRegistry.registerComponent（'playground'，（）=> playground）;


In React Native iOS, I would like to slide in and out a <View/> -- assuming it is implemented as such-- like the following pictures.

解决方案

Here's the result:

Here's the full code to make it work. It will not work on RNPlay because zIndex is not supported in the version they have.

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

class playground extends Component {
  constructor(props) {
     super(props);
     this.state = {
       slideAnimation: new Animated.Value(22),
     };
   }

  _showNotification() {
    StatusBar.setHidden(true, 'slide');

    Animated.timing(
      this.state.slideAnimation,
      {toValue: 0, duration: 300}
    ).start();
  }

  _hideNotification() {
    StatusBar.setHidden(false, 'slide');

    Animated.timing(
      this.state.slideAnimation,
      {toValue: 22, duration: 300}
    ).start();
  }

  render() {
    return (
      <View style={styles.container}>
        <StatusBar
           barStyle="default"
         />
        <Animated.View style={[styles.notification, {top: this.state.slideAnimation}]}>
          <Text style={styles.notificationText}>This is a notification</Text>
        </Animated.View>
        <View style={styles.body}>
          <TouchableHighlight underlayColor="#D1EEFC" style={styles.button} onPress={()=> { this._showNotification() }}>
            <Text style={styles.buttonText}>
              Show Notification
            </Text>
          </TouchableHighlight>

          <TouchableHighlight underlayColor="#D1EEFC" style={styles.button} onPress={()=> { this._hideNotification() }}>
            <Text style={styles.buttonText}>
              Hide Notification
            </Text>
          </TouchableHighlight>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  body: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF', //This is important to hide the notification, because it is actually behind it
    marginTop: 22, //This will make a gap of the same height in the top, so that the notification can slide in it.
  },
  button: {
    padding: 10,
    borderColor: '#D1EEFC',
    borderWidth: 2,
    borderRadius: 5,
    marginBottom: 22,
  },
  buttonText: {
    fontSize: 17,
    textAlign: 'center',
    color: '#007AFF'
  },
  notification: {
    backgroundColor: 'black',
    position: 'absolute',
    top: 22, //Move the notification downwards to setup the scene.
    left: 0,
    right: 0,
    height: 22, //Make it the same height as the status bar
    zIndex: 0, //This is what makes the notification benhind the container
  },
  notificationText: {
    color: 'yellow',
    textAlign: 'center',
    fontSize: 11,
    marginTop: 4
  },
});

AppRegistry.registerComponent('playground', () => playground);

UPDATE

I've managed to make the masking concept work by wrapping the notification inside a view with the style overflow: 'hidden'. The container is set to height: 22. So if the notification moves even 1pt, it will look as if the notification is sliding-in the background.

Here's the result:

Here's the code:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  StatusBar,
  View,
  TouchableHighlight,
  Animated,
  Image
} from 'react-native';

class playground extends Component {
  constructor(props) {
     super(props);
     this.state = {
       slideAnimation: new Animated.Value(22),
     };
   }

  _showNotification() {
    StatusBar.setHidden(true, 'slide');

    Animated.timing(
      this.state.slideAnimation,
      {toValue: 0, duration: 300}
    ).start();
  }

  _hideNotification() {
    StatusBar.setHidden(false, 'slide');

    Animated.timing(
      this.state.slideAnimation,
      {toValue: 22, duration: 300}
    ).start();
  }

  render() {
    return (
      <View style={styles.container}>
        <Image source={require('./img/splash.png')} style={styles.backgroundImage} resizeMode='cover' />
        <StatusBar
           barStyle="default"
         />
        <View style={styles.notificationContainer}>
          <Animated.View style={[styles.notification, {top: this.state.slideAnimation}]}>
            <Text style={styles.notificationText}>This is a notification</Text>
          </Animated.View>
        </View>
        <TouchableHighlight underlayColor="#D1EEFC" style={styles.button} onPress={()=> { this._showNotification() }}>
          <Text style={styles.buttonText}>
            Show Notification
          </Text>
        </TouchableHighlight>

        <TouchableHighlight underlayColor="#D1EEFC" style={styles.button} onPress={()=> { this._hideNotification() }}>
          <Text style={styles.buttonText}>
            Hide Notification
          </Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    justifyContent: 'center',
    alignItems: 'center',
  },
  backgroundImage: {
    position: 'absolute',
    top: 0,
  },
  button: {
    padding: 10,
    borderRadius: 5,
    marginBottom: 22,
    backgroundColor: '#FFFFFF88',
  },
  buttonText: {
    fontSize: 17,
    textAlign: 'center',
    color: '#000000'
  },
  notificationContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: 22,
    overflow: 'hidden' //This is the magic trick to do the masking.
  },
  notification: {
    backgroundColor: '#00000088',
    position: 'absolute',
    top: 22,
    left: 0,
    right: 0,
    height: 22,
  },
  notificationText: {
    color: 'yellow',
    textAlign: 'center',
    fontSize: 11,
    marginTop: 4
  },
});

AppRegistry.registerComponent('playground', () => playground);

这篇关于如何从顶层取代状态栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆