我想以纵向模式显示导航栏并以横向模式隐藏(对于全屏视频)。 有没有办法做到这一点?
您可以实现自己的 NavBar 并将其传递给场景。 我正在使用类似的东西
onLayout({nativeEvent}){
const isPortrait = nativeEvent.layout.width === WIDTH;
if (isPortrait){
if (this.state.height != NAVBAR_HEIGHT_PORTRAIT){
this.setState({height: NAVBAR_HEIGHT_PORTRAIT, delta:STATUS_BAR_HEIGHT});
}
} else {
if (this.state.height != NAVBAR_HEIGHT_LANDSCAPE){
this.setState({height: NAVBAR_HEIGHT_LANDSCAPE, delta:0});
}
}
}
render(){
return (
<View onLayout={this.onLayout.bind(this)} style={[styles.container, {height:this.state.height}, this.props.style]} >
{this.props.navBarHeader}
<View style={[styles.container, {height:this.state.height}, this.props.style]} >
<View style={{height:this.state.delta,flex:1}}></View>
<View style={{height:this.state.height-this.state.delta, flexDirection:'row'}}>
{this.props.navigationState.children.length > 1 ? this.renderBackButton(this.props) : this.renderLeftButton(this.props)}
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
{this.renderTitle(this.props)}
</View>
{this.renderRightButton(this.props)}
</View>
{this.props.footer}
</View>
</View>
);
}
如果社区需要并提交 PR,也许我们可以在组件 NavBar 中加入这样的逻辑。
是的,我正在使用类似的东西,尽管更简单 -
onLayout = event => {
const { width, height } = event.nativeEvent.layout;
var newStyle;
if (width > height) {
newStyle = update(this.state.style, {marginTop: {$set: 0}});
} else {
newStyle = update(this.state.style, {marginTop: {$set: 64}});
}
this.setState({style: newStyle});
// hide navbar in landscape mode
Actions.refresh({hideNavBar: (width > height)});
}
嘿@vinayr,我正在尝试做类似的事情,但是,在我的场景中,我得到了
componentDidMount(){
Actions.refresh({hideNavBar:false});
}
componentWillUnmount(){
Actions.refresh({hideNavBar: true})
}
所以当我离开场景导航栏,但也重新加载状态或类似的东西时,因为前一个场景有一个推送到当前场景的验证,当我回去时它再次重定向到场景。
最有用的评论
您可以实现自己的 NavBar 并将其传递给场景。 我正在使用类似的东西
如果社区需要并提交 PR,也许我们可以在组件 NavBar 中加入这样的逻辑。