I'm using react-native-router-flux navigation
(version: ^4.0.0-beta.21) for React Native
.(version: 0.48.3)
The scenes are as follows:
<Scene key="scene_condition"
tabs={true}
type="reset"
tabBarStyle={styles.tabBarStyle}
tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle}
navigationBarStyle={styles.navBarStyle}
titleStyle={styles.navBarTitleStyle}
hideTabBar={false}
hideNavBar={true}
duration={0}
tabBarPosition="bottom"
labelStyle={{fontSize: 7}}
title="">
<Scene key="scene_condition_car"
tabBarLabel={gettext("Model")}
title={gettext("Model")}
component={Car}
icon={TabIcon}
duration={0}
iconTittleHidden
iconName="directions-car"
leftButtonIconStyle={styles.moduleButton}
leftButtonImage={require('./img/icons/left.png')}
onLeft={(props) => requestOverview(props.request.id)}
navigationBarStyle={styles.navBarStyle}
titleStyle={styles.navBarTitleStyle}/>
<Scene key="scene_condition_specs"
tabBarLabel={gettext("Specifications")}
title={gettext("Specifications")}
labelStyle={{fontSize: 18}}
component={CarSpecs}
icon={TabIcon}
iconTittleHidden
duration={0}
iconName="control-point-duplicate"
leftButtonIconStyle={styles.moduleButton}
leftButtonImage={require('./img/icons/left.png')}
onLeft={(props) => requestOverview(props.request.id)}
navigationBarStyle={styles.navBarStyle}
titleStyle={styles.navBarTitleStyle}/>
<Scene key="scene_condition_picture"
tabBarLabel={gettext("Pictures")}
title={gettext("Pictures")}
component={CarPicture}
icon={TabIcon}
iconTittleHidden
duration={0}
iconName="photo-camera"
leftButtonIconStyle={styles.moduleButton}
leftButtonImage={require('./img/icons/left.png')}
onLeft={(props) => requestOverview(props.request.id)}
navigationBarStyle={styles.navBarStyle}
titleStyle={styles.navBarTitleStyle}/>
</Scene>
Thus, main scene and three tab scenes. My question is how can I hide tabBar and navBar on the tab scene with key scene_condition_picture
?
The render method of that component is as follows:
render() {
const self=this;
if(this.state.showCamera){
return <CameraApp cameraData={this.state.data}/>;
}
return (
<View>
<StatusBar backgroundColor="blue" barStyle="light-content"/>
<Zoom visible={this.state.zoomVisible} close={() => this.setState({zoomVisible: false})} image={this.state.zoomImage} imageIndex={this.state.zoomIndex} pictures={this.state.zoomPictures} remove={this.onRemoveImage.bind(this)} />
<FlatList
data={this.state.pictures}
renderItem={({item}) => {
return (
<View style={styles.card}>
<Card title={item.title} mandatory={item.mandatory} image={item.image} noImage={item.noImage} onPress={() => self.pictureOverlay(item)}/>
</View>
)
}}
keyExtractor={() => Common.generateUUID()}
numColumns={3}
/>
</View>
)
}
Thus, I want to hide tabBar and navBar only if this.state.showCamera
is true
. Then I want to load camera and I do not need tabBar or navBar.
If this.state.showCamera
is false then I want to show tabBar or navBar and that is in this case good.
Thus the only thing that I need is to hide tabBar or navBar if this.state.showCamera
is true
.
Any idea?