Javascript 如何从顶部替换状态栏？

在React Native iOS中，我想滑入滑出一个

——假设它是这样实现的——如下图所示。

这里有一种方法

使用绝对定位的

。您希望职位样式如下所示：

position: 'absolute',
top: 0,
left: 0,
height: 20

然后在视图中，您需要一个

动画的
元素，一个视图或文本元素。您可能希望嵌套的动画视图开始定位在顶部视图中的“屏幕外”，然后在组件的
componentWillMount
方法中，将文本设置为从视图下方动画化，以显示在视图中。这将使您的文本具有滑动效果。在这里，您可以了解有关动画库的更多信息：

最后，看起来您还希望状态栏同时隐藏，因此需要将其设置为隐藏并设置该动作的动画。这很容易做到，检查RN文档中的
StatusBar

如果您遇到问题，请在问题中发布一些代码，我可以帮助您排除故障。
结果如下：


下面是使其工作的完整代码。它在RNPlay上不起作用，因为它们的版本不支持zIndex

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);

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本
状态栏，
看法
触控高光，
有生气的
}从“反应本机”；
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
slideAnimation：新的动画值（22），
};
}
_showNotification（）{
StatusBar.setHidden（true，“slide”）；
时间(
this.state.slideAnimation，
{toValue:0，持续时间：300}
).start（）；
}
_隐去{
StatusBar.setHidden（false，'slide'）；
时间(
this.state.slideAnimation，
{toValue:22，持续时间：300}
).start（）；
}
render（）{
返回(

代码如下：

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);

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本
状态栏，
看法
触控高光，
有生气的
形象
}从“反应本机”；
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
slideAnimation：新的动画值（22），
};
}
_showNotification（）{
StatusBar.setHidden（true，“slide”）；
时间(
this.state.slideAnimation，
{toValue:0，持续时间：300}
).start（）；
}
_隐去{
StatusBar.setHidden（false，'slide'）；
时间(
this.state.slideAnimation，
{toValue:22，持续时间：300}
).start（）；
}
render（）{
返回(
这是通知
{this.\u showNotification（）}}>
显示通知
{this.\u hideNotification（）}}>
隐藏通知
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#F5FCFF”，
为内容辩护：“中心”，
对齐项目：“居中”，
},
背景图片：{
位置：'绝对'，
排名：0，
},
按钮：{
填充：10，
边界半径：5，
marginBottom:22，
背景颜色：“#FFFFFF88”，
},
按钮文字：{
尺寸：17，
textAlign:'中心'，
颜色：'#000000'
},
通知容器：{
位置：'绝对'，
排名：0，
左:0,，
右:0,，
身高：22，
溢出：“隐藏”//这是进行掩蔽的魔术。
},
通知:{
背景颜色：'#00000088'，
位置：'绝对'，
排名：22，
左:0,，
右:0,，
身高：22，
},
通知文本：{
颜色：'黄色'，
textAlign:'中心'，
尺寸：11，
玛金托普：4
},
});
AppRegistry.registerComponent（'游乐场'，（）=>游乐场）；
感谢您的回答。有几个问题。首先，当您在我的俯视图中提到开始定位“屏幕外”时，您是指它出现在状态栏底部吗？因为
出现在状态栏底部，并向上推“屏幕外”状态栏，这就是我想要实现的。如果是这样的话，我怎样才能将
隐藏在状态栏下面？你能详细说明一下文本是什么吗？最后，状态栏不会消失。它只是被推上，“离开屏幕”。一段时间后，它会出现并按下视图。如果您查看
动画
库，您可以创建一个
元素，该元素也绝对位于视图中的高度20处，然后在加载时更改其位置。此库并不完全是您需要的，但如果您查看源代码，您可以看到我做了他们的，然后根据需要修改你的。我做了尝试，并用“编辑”更新了原始帖子。关于我应该如何做，有什么指导或见解吗？请告诉我。我已经坚持了好几天了。@AhmedAlHaddad这是一个我以前没有做过的问题。但我有一些想法，我会研究它。@Ahmedalhadd非常好，真的很期待！我的运气还是不好end@AhmedAlHaddad只是想看看你是否有机会。谢谢艾哈迈德！检查我下面的答案。另外，请修正验证消息的语法。它应该说“你忘了选择付款方式”@AhmedAlHaddad抱歉，我很忙，今天终于有时间处理了。首先，在通知出现后，过一段时间，我希望它自动消失而不被调用。正确的方法是什么？最后，我在状态栏下有一个图像，所以在b上设置
marginTop:22
ody向下推图像，这是我不想要的。是否需要对其进行处理？如果我不执行
marginTop:22
操作，状态栏会向上滑动，但notif