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

【问题标题】：React-native-navigation: goBack() doesn't workReact-native-navigation：goBack() 不起作用
【发布时间】：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()}
                />)

            }
        }
    }

这是已调度的事件：

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

【问题讨论】：

标签： reactjs react-native react-redux react-navigation

【解决方案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>

【讨论】：