React-native:this.navigator.pop 不起作用

Question

我是反应原生的新手。我使用 react-native-navbar 包返回到以前的路由导航栏组件以进行 react-native

当我单击导航栏按钮时，它向我显示错误" undefined is not an object(evaluating 'this.navigator.pop') "

这是我的片段：

'use strict';
var React = require('react-native');
var {
    StyleSheet,
    Text,
    View,
} = React;
var NavigationBar = require('react-native-navbar');
var Demo = React.createClass({
    render: function()
    {
        var leftButtonConfig = {
          title: 'Back',
          handler: function onNext() {
            this.navigator.pop();
          }
        };
        var titleConfig = {
          title: 'Hello world page!',
        };
        return(
            <View style={{ flex: 1, }}>
      <NavigationBar
        title={titleConfig}
        leftButton={leftButtonConfig} />
            <View style={styles.container}>
        <Text style={styles.header}>
        Hello World
        </Text>
        </View>
        </View>
        );
    }
});
var styles = StyleSheet.create({
    container: {
        flex:1
    },
    header: {
        fontSize: 20,
        fontWeight: 'bold',
        textAlign: 'center'
    }
});
module.exports = Demo;

Answer 1

你只需要把它作为一个道具来调用。

正如他们在示例中使用的那样

this.props.navigator.pop()

路由时，导航使用作为道具传递给组件，以便在屏幕堆栈中弹出时更容易。 顺便说一句，Wix导航可以替代这一点，并且有一个很好的文档。

Answer 2

根据 react 本机导航 7.0.0 文档，您需要import { Navigation } from 'react-native-navigation';然后在返回按钮单击时需要编写Navigation.pop(this.props.componentId, { component: { name: 'ComponentName', } })

Answer 3

这

不起作用onPress={（） => navigation.pop（）}

因此，请使用此：

onPress={（） => navigation.goBack（）}