反应导航返回按钮不做任何事情

Question

基本上就是标题所说的。我正在尝试通过将当前页面 routeName 传递到导航状态来创建后退按钮，然后在详细信息页面上检索参数并将 routeName 传递给 goBack 按钮。但是当我单击按钮时，它什么也没做。我检查了上一页的routeName是否处于状态，但它仍然没有做任何事情。

列表屏幕 这是我的 Button，我将一个 reducer 的 id 和当前屏幕的 routeName 传递给导航参数

renderList = () => {
    const { lists } = this.props;
    if(lists) {
        return (lists.data.map(el => {
            return (
                <TouchableOpacity
                    key={el.id}
                    onPress={ () => this.props.navigation.navigate('PostItem', { nid: el.id, prevScreen: this.props.navigation.state.routeName})}>
                    <Text>Next Screen</Text>
                </TouchableOpacity>
            )}
        ))
    }
}

列表详情屏幕

class listDetail extends Component {

        constructor(props) {
            super(props);
        }

        componentDidMount() {
            this.props.loadPost('article', this.props.navigation.state.params.nid + '?include=field_image')
        }

        render() {
            const { goBack } = this.props.navigation;
            return (
                <View>
                    <Button title="Back" onPress={() => goBack(this.props.navigation.state.params.prevScreen)} />
                    { this.renderPost() }
                </View>
            )

        }
    }

有什么建议吗？

Answer 1

goBack 中的参数指的是key 而不是routeName。

来自reactnavigation goBack docs

注意——关键不是路线的名称，而是您在导航到路线时提供的唯一标识符。请参阅导航键。 因此，在您的示例中，我将尝试使用关键参数调用导航

对于renderList onPress 可能是

onPress={ () => this.props.navigation.navigate({ routeName: 'PostItem', key: `PostItem_${el.id}`, params: { nid: el.id } })}>

然后在ListDetail

<Button title="Back" onPress={() => goBack(`PostItem_${this.props.navigation.state.params.nid}`)} />