【问题标题】:Navigation in React-Native is not working (RNRF)React-Native 中的导航不起作用(RNRF)
【发布时间】:2020-06-23 12:26:41
【问题描述】:

如果用户已登录,我正在尝试导航到我的 main 关键组件,我正在从 login 场景调用方法,但它不起作用。

这是我尝试过的。

            if (this.props.simplifiedApp) {
                console.log("Login > Simplified");
                Actions.replace('simplifiedApp');
            } else {
                console.log("Login > Main"); 
              console.log('Before',Actions.currentScene); 
              //I've tried all of the possible navigation methods but none of these working
                Actions.popAndPush('main');
                Actions.push('main');
                Actions.refresh();
                Actions.replace('main');  
                Actions.reset('main');
                Actions.main;
                console.log('After',Actions.currentScene);
              //  Actions.reset('main');   
            }

这是我的Router.js

<Router createReducer={reducerCreate.bind(this)}>
            <Lightbox>
                <Scene key="root" titleStyle={{}}>
                    <Scene key="auth" hideNavBar>
                        <Scene key="login" component={Login} title={ I18n.t('loginTitle') }/>
                    </Scene>
                    <Scene key="drawer" drawer drawerPosition="right" drawerWidth={200} contentComponent={Drawer}
                           navBar={NavBar}>
                        <Lightbox key="fullApp">
                            <Scene key="main" tabs hideTabBar swipeEnabled={false}>
                                <Scene key="menu" component={Menu} title={ I18n.t('menuTitle') } hideNavBar/>
                                <Scene key="orders" component={Orders} title={ I18n.t('ordersTitle') } hideNavBar/>
                            </Scene>
                            <Scene key="ordersMatchingItems" component={MenuItemsOverlay}/>
                            <Scene key="ordersProcessingItems" component={ProcessingItemsOverlay}/>
                            <Scene key="menuSelectedItemOverlay" component={SelectedMenuItemOverlay}/>
                            <Scene key="menuOrdersOverlay" component={OrdersOverlay}/>
                            <Scene key="keyPadOverlay" component={KeyPadOverlay}/>
                            <Scene key="remarksOverlay" component={RemarksOverlay}/>
                        </Lightbox>
                        <Scene key="simplifiedApp" component={Simplified} hideNavBar/>
                        <Scene key="orderReport" component={OrderReport} hideNavBar/>
                    </Scene>
                </Scene>
                <Scene key="orderConfirmationOverlay" component={OrderConfirmationOverlay} hideNavBar/>
                <Scene key="editItemOverlay" component={EditItemOverlay} hideNavBar/>
                <Scene key="offlineOverlay" component={NotificationOverlay}/>
                <Scene key="confirmationOverlay" component={ConfirmationOverlay}/>
                <Scene key="notificationOverlay" component={NotificationOverlay}/>
                <Scene key="columnSelectionOverlay" component={ColumnSelectionOverlay} hideNavBar/>
                <Scene key="calendarOverlay" component={CalendarOverlay} hideNavBar/>
            </Lightbox>
        </Router>

【问题讨论】:

  • 你用的是哪个版本的 react-navigation ?
  • @rashijain "react-navigation": "^4.3.9"

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


【解决方案1】:

如果我在此之前调用componentDidUpdate() 中的方法,我使用componentDidMount() 调用,它会起作用。

componentDidMount() {
        console.log('drawer componentDidMount');
        this.checkState();
    }

    componentDidUpdate() {
        console.log('drawer componentDidUpdate');
        this.checkState();
        if (this.props.failureCount >= 5) {
            this.props.multipleFailedAttempts();
            this.timer = setTimeout(this.props.resetFailure.bind(this), 30000);
        } else {
            if (this.timer !== null) {
                clearTimeout(this.timer);
            }
        }
    }

现在我的代码看起来像

componentDidMount() {
        console.log('drawer componentDidMount');
        // Added this line to forcefully call componentDidUpdate()
        this.setState({test: true});
    }

    componentDidUpdate() {
        console.log('drawer componentDidUpdate');
        this.checkState();
        if (this.props.failureCount >= 5) {
            this.props.multipleFailedAttempts();
            this.timer = setTimeout(this.props.resetFailure.bind(this), 30000);
        } else {
            if (this.timer !== null) {
                clearTimeout(this.timer);
            }
        }
    }

现在它就像一个魅力。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-02-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-04-03
    • 1970-01-01
    • 2019-09-09
    • 2020-07-28
    相关资源
    最近更新 更多