Question

所以基本上我在标题中遇到与导航器相关的错误。当我按下图标时会弹出错误。

我基本上想要做的是在顶部制作一个标签栏，在三个不同的视图之间切换：feed，wiki和留言板

这是我的index.android.js :(导入导航）

_renderScene(route, navigator) {
    var globalNavigatorProps = {navigator};

    switch(route.ident) {
        case "FeedView":
            return(
                <Feed
                 {...globalNavigatorProps}
                />
            );

        case "WikiView":
            return(
                <View>
                    <Text>
                        {'Hello'};
                    </Text>
                </View>
            );

        case "BoardView":
            return(
                <View>
                    <Text>
                        {'Hello'};
                    </Text>
                </View>
            );

        default:
            console.log(`Something went wrong ${route}`);
    }
}

render(){
    return(
        <View>
            <Nav />
            <Navigator
                initialRoute={{ident:"Feed"}}
                ref="appNavigator"
                renderScene={ this._renderScene }
            />

        </View>
    );
}

这是我的Nav.js：

constructor(props){
    super(props);
}

render(){

    console.log(this.props.navigator);
    return(
        <View style={{flexDirection: "column"}}>
            <View style={styles.nav}>
                <Icon onPress={(event) => this.props.navigator.push({ident: "Feed"})} name="newspaper-o" size={22}/>
                <Icon name="wikipedia-w" size={22}/>
                <Icon name="comments" size={22}/>
            </View>
            <View style={styles.divider}/>
        </View>
    );
}

_changeView(type){

}

Answer 1

我不认为这是问题，但renderScene函数不会被绑定到react组件。

尝试将renderScene={ this._renderScene }转入renderScene={ this._renderScene.bind(this) }

Answer 2

当你没有绑定（这个）时总是会发生这个错误，请检查你的Icon模块onPress方法

Answer 3

如果您尝试实现选项卡式视图，有更好的方法可以使用开源模块，例如此https://github.com/skv-headless/react-native-scrollable-tab-view 开发人员以这样的方式使它易于使用，并且该示例足以完成大部分内容。

因此，我建议不要自己创建这样的组件，而是使用社区制作的模块。

希望我的回答很有帮助。

React Native错误：undefined不是对象（评估'_this2.props.navigator.push'）

3 个答案: