简体   繁体   English

React Native Navigator renderView返回条件不合逻辑

[英]React Native Navigator renderView return conditional not logical

I am creating a react native app in Android. 我正在Android中创建一个react本机应用程序。

I have a conditional on my renderView method and it doesn't seem the logic makes sense. 我有一个条件我的renderView方法,似乎逻辑似乎没有意义。 The code below is my render and renderView method. 下面的代码是我的render和renderView方法。 What I dont understand is the renderView method below that: 我不明白的是下面的renderView方法:

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. 如果我将route.id作为'VaquinhaView'传递,它将返回HomeView组件。 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. 我知道它不是递归地调用该方法(我已经检查过),并且我尝试用纯JS而不是JSX编写它。

Edit: I also tried changing the syntax, and it still fails: 编辑:我也尝试更改语法,但仍然失败: 在此输入图像描述

Edit 2 (upon request): 编辑2(根据要求):

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) (rowData.view是视图的字符串名称)

So, 所以,

It turned out that I don't think i'm meant to call renderView() directly, but let the Navigator do that. 事实证明,我不认为我是想直接调用renderView(),而是让Navigator这样做。 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. 在这一点上值得记住,解释的JS首先被转换,所以事件虽然看起来条件满足,但它仍然在'else'块中,你可能不会看到被解释的代码。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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