Question

我有一个工作导航栏的代码，但是我需要隐藏导航栏，因为在点击全屏模式时有一个视频播放器。导航栏不会隐藏。

这里的Navbar.js文件是导航栏的代码

export default class Navbar extends Component {
  render() {
    return(
      <Header
        style={{backgroundColor: Colors.navbarBackgroundColor}}
        backgroundColor={Colors.navbarBackgroundColor}
        androidStatusBarColor={Colors.statusBarColor}
        noShadow={true}
        >
        {this.props.left ? this.props.left : <Left style={{flex: 1}} />}
        <Body style={styles.body}>
          <Title style={styles.title}>{this.props.title}</Title>
        </Body>
        {this.props.right ? this.props.right : <Right style={{flex: 1}} />}
      </Header>
    );
  }
}

这是我使用narbar的文件，我怎么能隐藏？

import Navbar from '../component/Navbar';

onFullScreen(fullScreen) {

}


return(
  <SideMenuDrawer ref={(ref) => this._sideMenuDrawer = ref}>
//Hide this navbar
 <Navbar left={left} right={right} title={this.props.title} />
  <Container style={{backgroundColor: '#fdfdfd'}}>
  <Video url={'http://techslides.com/demos/sample-videos/small.mp4'}
  onFullScreen={status => this.onFullScreen(status)}
  style={{ width: Dimensions.get('window').width, height: 200}}/>
  </Container>
  </SideMenuDrawer>
  );
}

Answer 1

使用导航栏不是一个好主意，总是使用原生元素更好但顺便说一句，你应该有一个视频播放回调并停止

videoWillPlay = (event) => {
    this.setState({flexSize: 0,Height:0});
};

videoWillStop = (event) => {
    this.setState({flexSize: 3.5,Height:1});
};

然后您可以将导航栏高度设置为零，或者如果它的弹性值为零，则可以设置你应该动态风格

<Navbar left={left} right={right} title={this.props.title} 
    style={{flex: this.state.flexSize}}/>

您还可以将视频播放到完整尺寸并且不要触摸导航栏

Answer 2

您可以基于布尔值有条件地渲染组件。因此，如果您处于全屏模式，您可以根据您的情况引入布尔值，然后使用它来决定是否要渲染导航栏：

{!isFullscreen && <Navbar left={left} right={right} title={this.props.title} />}

实际上可能是this.props.isFullscreen或this.state.isFullscreen，具体取决于您想要跟踪价值的位置，但这是一般概念。

以下是基于当前代码使用内部状态的示例：

export default class YourComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isFullScreen: false
    };
  }

  onFullScreen = fullScreen => {
    this.setState({
      isFullScreen: fullScreen
    });
  }

  render() {
    const {isFullScreen} = this.state;

    return (
      <SideMenuDrawer ref={(ref) => this._sideMenuDrawer = ref}>
        {!isFullScreen && <Navbar left={left} right={right} title={this.props.title} />}

        <Container style={{ backgroundColor: '#fdfdfd' }}>
          <Video
            url={'http://techslides.com/demos/sample-videos/small.mp4'}
            onFullScreen={this.onFullScreen}
            style={{ width: Dimensions.get('window').width, height: 200 }} />
        </Container>
      </SideMenuDrawer>
    );
  }
}

我没有关于你的项目的所有信息，所以这假设传递回Video的{{1}} prop的值是一个布尔值。如果它是一个对象，你可能需要使用这样的东西：

onFullScreen

React native隐藏导航栏元素

2 个答案: