我在React Native中使用Redux的React Navigation。 导航工作正常,但在一个屏幕上goBack()函数不起作用。你能告诉我们为什么吗?
这是标题配置:
static navigationOptions = {
header: ({ state, goBack }) => {
return {
title: state.params.name,
right: (<Button
title={'Done'}
onPress={() => goBack()}
/>)
}
}
}
这是派遣的事件:
没有屏幕被关闭。设备上的屏幕保持不变。
答案 0 :(得分:6)
尝试
<Button onPress={() => this.props.navigation.goBack(null)}>
将 null 用作输入参数时,它将带您到最后一页(立即历史记录),并且在嵌套 StackNavigators 返回父级的情况下会很有帮助子导航器在堆栈中仅包含一项时的导航器。
他们将来可能会更改,因为根据他们的文档,他们计划进行更改。
有关更多信息,请检查here。
答案 1 :(得分:4)
我认为,如果你想使用goBack()动作,你必须在你的视图(不是标题)中使用这样的东西
<Button onPress={() => this.props.navigation.goBack()}>
答案 2 :(得分:1)
我有同样的问题。我不知道为什么,但写goBack(null)对我有用:|
答案 3 :(得分:1)
GoBack有点片状,专门分发了对我有用的操作。
import { NavigationActions } from 'react-navigation';
this.props.navigation.dispatch(NavigationActions.back())
答案 4 :(得分:0)
答案 5 :(得分:0)
这是一个解决方案。
这是我的工作代码: -
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>
}
}
答案 6 :(得分:0)
根据此github issue发布的解决方案。将null
作为参数传递给goBack
函数应该可以正常工作,就像它对我一样。以下代码适用于OP:
static navigationOptions = {
header: ({ state, goBack }) => {
return {
title: state.params.name,
right: (<Button
title={'Done'}
onPress={() => goBack(null)}
/>)
}
}
}
答案 7 :(得分:0)
使用StackActions
API破坏了我的应用程序中的导航。通过仅使用(更简单,更可靠)NavigationActions
API的屏幕,后退按钮可以正常工作。
答案 8 :(得分:0)
反应导航
<TouchableOpacity onPress={()=>{ this.props.navigation.goback() }}>
<Text>Back</Text>
</TouchableOpacity>
react-native-router-flux
<TouchableOpacity onPress={() => { Actions.pop() }}>
<Text>Back</Text>
</TouchableOpacity>