如何从顶层取代状态栏? [英] How to from top that replaces status bar?
问题描述
在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屋!