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

时间:2017-10-09 07:50:52

标签: react-native react-native-router-flux

我正在使用

"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组件,我想隐藏tabBarCameraApp。因此,我尝试使用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

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

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