反应导航后退按钮不做任何事情

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>
            )}
        ))
    }
}

ListDetail屏幕

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开始

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

对于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}`)} />