React-native-navigation：goBack() 不起作用

Posted 2023-02-22

【中文标题】React-native-navigation：goBack() 不起作用

【英文标题】：React-native-navigation: goBack() doesn't work

【发布时间】：2017-10-14 09:31:51

【问题描述】：

我在 React Native 中使用 React Navigation 和 Redux。 导航工作正常，但在一个屏幕上 goBack() 函数不起作用。你能告诉我们为什么吗？

这是标题配置：

static navigationOptions = 
        header: ( state, goBack ) => 
            return 
                title: state.params.name,
                right: (<Button
                    title='Done'
                    onPress=() => goBack()
                />)

            
        
    

这是已调度的事件：

没有弹出屏幕。设备上的屏幕保持不变。

【参考方案1】：

试试 <Button onPress=() => this.props.navigation.goBack(null)>

当 null 用作输入参数时，它会将您带到最后一页（即时历史记录），并且在嵌套 StackNavigators 回到父级的情况下会有所帮助当子导航器在堆栈中只有一项时，导航器。

他们将来可能会改变，因为根据他们的文档，他们计划改变它。

更多信息请查看here。

【参考方案2】：

我认为，如果您想使用 goBack() 操作，您必须在视图中使用类似的内容（而不是标题）

<Button onPress=() => this.props.navigation.goBack()>

【讨论】：

也测试了这个。不起作用...看起来 react-native-navigation 库有问题：gitHub Issue

这仅在您不想使用功能时有效。当你使用带有 onPress 的函数并使用 navigation.goback() 时，它不起作用。

【参考方案3】：

GoBack 有点不稳定，明确地调度对我有用的操作。

import  NavigationActions  from 'react-navigation';

this.props.navigation.dispatch(NavigationActions.back())

【参考方案4】：

我也有同样的问题。我不知道为什么，但是写 goBack(null) 对我有用：|

【参考方案5】：

这是github issue 中发布的工作解决方案：

setTimeout(this.props.navigation.goBack, 0)

显然这个错误是最近的回归。

【参考方案6】：

这是一个解决方案。

这是我的工作代码：-

static navigationOptions = (navigation, screenProps) => 
     return 
         title:'SECOND',
         headerStyle: backgroundColor: '#ffffff',
         headerTitleStyle:fontSize:12,
         headerLeft:<TouchableOpacity onPress=()=>navigation.goBack()>
                      <Image source=uri:'back_btn' style=height: 20, width: 20,marginLeft:10,/>
                  </TouchableOpacity>
     
  

【参考方案7】：

根据github issue 上发布的解决方案。将null 作为参数传递给goBack 函数应该可以正常工作，就像它对我所做的那样。以下代码在 OP 的情况下应该可以工作：

static navigationOptions = 
        header: ( state, goBack ) => 
            return 
                title: state.params.name,
                right: (<Button
                    title='Done'
                    onPress=() => goBack(null)
                />)

            
        
    

【参考方案8】：

使用StackActions API 破坏了我的应用中的导航。通过导航到仅使用（更简单且更可靠）NavigationActions API 的屏幕，后退按钮起作用。

【参考方案9】：

反应导航

<TouchableOpacity onPress=()=> this.props.navigation.goback() >
 <Text>Back</Text>
</TouchableOpacity>

react-native-router-flux

<TouchableOpacity onPress=() =>  Actions.pop() >
 <Text>Back</Text>
</TouchableOpacity>