简体   繁体   中英

React Native Navigator renderView return conditional not logical

I am creating a react native app in Android.

I have a conditional on my renderView method and it doesn't seem the logic makes sense. The code below is my render and renderView method. What I dont understand is the renderView method below that:

renderView: function(route, navigator) {
    if (route.id === 'VaquinhaView') {
        return  (
            <VaquinhaView openDrawer={this.openDrawer} navigator={navigator} />;
        )
    } else if (route.id === 'HomeView') {
        return (
            <HomeView openDrawer={this.openDrawer} />
        );
    }
},

render: function() {

    var _renderView = this.renderView;
    var _changeView = this.changeView;

    return (
        <DrawerLayoutAndroid
            drawerWidth={deviceWidth - 50}
            ref={'SIDE_MENU'}
            drawerPosition={DrawerLayoutAndroid.positions.Left}
            renderNavigationView={() => <NavigationView changeView={_changeView} />}>

            <Navigator
                ref={'NAV'}
                initialRoute={{
                    id: 'HomeView', 
                    component: HomeView
                }}
                configureScene={() => Navigator.SceneConfigs.FloatFromRight}
                renderScene={(route, navigator) => _renderView(route, navigator)}>
            </Navigator>
        </DrawerLayoutAndroid>
    );
}

If I pass route.id as 'VaquinhaView' it returns the HomeView component. I've never seen a conditional act like this. If I step over one line it jumps to the below. Screen shots:

在此输入图像描述

在此输入图像描述

I know it is not calling the method recursively (I've checked), and I have tried writing it in pure JS instead of JSX.

Edit: I also tried changing the syntax, and it still fails: 在此输入图像描述

Edit 2 (upon request):

changeView: function(route) {


    this.renderView(route, this.refs['NAV']);
    this.closeDrawer();
},

Called by:

_this.props.changeView({id: rowData.view}); 

(rowData.view is a string name of the view)

So,

It turned out that I don't think i'm meant to call renderView() directly, but let the Navigator do that. This resolved the main issue.

It's worth remembering at this point that the JS that is interpreted is converted first, so event though it looks like the condition is satisfied, and it's still going in the 'else' block, you're probably not looking at the code that's being interpreted.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM