Question

我正在使用

"react-native": "0.48.3",
"react-native-router-flux": "^4.0.0-beta.21"

是否有可能根据状态隐藏导航栏和tabbar？

我现在所做的如下：

<Scene key="scene_condition"
                   tabs={true}
                   type="reset"
                   tabBarStyle={styles.tabBarStyle}
                   tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle}
                   navigationBarStyle={styles.navBarStyle}
                   titleStyle={styles.navBarTitleStyle}
                   lazy={true}
                   hideTabBar={false}
                   hideNavBar={true}
                   tabBarPosition="bottom"
                   labelStyle={{fontSize: 7}}
                   title=""
                   animationEnabled={false}
                   swipeEnabled={false}
                   showLabel={false}>                
                <Scene key="scene_condition_picture"
                       tabBarLabel={gettext("Pictures")}
                       title={gettext("Pictures")}
                       component={CarPicture}
                       type="reset"
                       icon={TabIcon}
                       iconTittleHidden
                       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 key="scene_condition_damages"
                       tabBarLabel={gettext("Damages")}
                       title={gettext("Damages")}
                       component={Damages}
                       type="reset"
                       icon={TabIcon}
                       iconTittleHidden
                       iconName="broken-image"
                       leftButtonIconStyle={styles.moduleButton}
                       leftButtonImage={require('./img/icons/left.png')}
                       onLeft={(props) => requestOverview(props.request.id)}
                       navigationBarStyle={styles.navBarStyle}
                       titleStyle={styles.navBarTitleStyle}/>
            </Scene>

因此，这是主路由器组件，我有两个选项卡组件。在 scene_condition_picture 组件中，我想根据状态显示navBar和tabBar。因此，我的代码如下：

constructor(props) {
        super(props);
        this.state = {            
            showCamera: false
        };
    }

然后在render方法中使用以下内容：

render(){
    if(this.state.showCamera){
            return <CameraApp cameraData={this.state.data} hideCamera={this.hideCamera.bind(this)} navData={this.props}/>;
        }

        return (
            <View>
                <TouchableHighlight onPress={() => this.setState({showCamera: true})}><Text>Show camaer</Text></TouchableHighlight>
            </View>
        )
}

如果显示navBar组件，我想隐藏tabBar和CameraApp。因此，我尝试使用CameraApp中Actions.refresh内的componentDidMount，如下所示：

componentDidMount(){
        Actions.refresh({hideNavBar: true, hideTabBar: true});
}

但它不起作用。

如果我在scene_condition_picture组件中记录道具，我会看到这些道具很好（hideNavBar: true, hideTabBar: true）但是它们没有被隐藏。

screen shot 2017-10-09 at 09 45 11

有什么想法吗？

Answer 1

现在在4.0.0-beta.28及更高版本中运行正常

React Native中的路由器磁通导航中的Actions.refresh

1 个答案: