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

时间:2015-11-24 11:49:47

标签: javascript android reactjs react-native react-router

我正在Android中创建一个本机应用程序。

我的renderView方法有一个条件,它看起来似乎不合逻辑。 下面的代码是我的render和renderView方法。我不明白的是下面的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>
    );
}

如果我将route.id作为'VaquinhaView'传递,它将返回HomeView组件。我从来没有见过像这样的条件行为。如果我跨过一行,它会跳到下面。截屏:

enter image description here

enter image description here

我知道它不是递归地调用该方法(我已经检查过),并且我尝试用纯JS而不是JSX编写它。

编辑:我也尝试更改语法,但仍然失败: enter image description here

编辑2(根据要求):

changeView: function(route) {


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

被叫:

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

(rowData.view是视图的字符串名称)

1 个答案:

答案 0 :(得分:0)

所以,

事实证明,我不认为我是想直接调用renderView(),而是让Navigator这样做。这解决了主要问题。

在这一点上值得记住,解释的JS首先被转换,所以虽然看起来条件满足,但它仍然在'else'块中,你可能不会看代码那是被解释的。