React Native Navigation覆盖堆栈导航器中标头返回按钮的goBack()

Question

我想在一个屏幕上本地自定义堆栈导航器中默认后退按钮的行为。

在细节中，假设堆栈上有screen1|screen2，我想在按下按钮后将一些道具从screen2传递到screen1。

我花了很多时间阅读React导航文档，在互联网上搜索和编码，但我无法做到这一点。

来自DOCS

在某些情况下，您可能想要自定义后退按钮，而不是通过上面提到的选项，在这种情况下，可以将headerLeft选项设置为将渲染的React元素我知道这个问题与headerRight组件的goBack((函数有关

我想用navigation.anavigation("previousScreen"，｛｛..props｝｝(来覆盖与headerLeft back按钮相关的默认函数goBack((。

而且(这非常重要！！(我想在特定的屏幕上本地使用这种行为，而不是全局使用。

我试过这样的东西，但不起作用。

export default function App(){
return(
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="FirstScreen" component={FirstScreen}/>
<Stack.Screen name="SecondScreen" component={SecondScreen} options={{headerLeft: () => (
<HeaderBackButton
onPress={() =>navigation.navigate("FirstScreen",{//stuff//})}
title="Info"
color="#fff"
/>
),}}/>
</Stack.Navigator>
</NavigationContainer>
)}

Answer 1

对于react导航v6，您可以在useEffect 中使用setOptions

import { HeaderBackButton } from '@react-navigation/elements';
...
const MyScreen = ({navigation}) => {
useEffect( () => {
navigation.setOptions({ headerShown: true,
headerLeft: (props) => (
<HeaderBackButton
{...props}
onPress={() => {
navigation.navigate('MyOtherScreen');
}}
/>
)
});
} ); 
}

Answer 2

如果您使用的是react navigation v5，您可以使用设置特定屏幕的行为

import { HeaderBackButton } from '@react-navigation/stack';
...
options={{
headerLeft: (props) => (
<HeaderBackButton
{...props}
onPress={() => {
navigation.navigate('screenName');
}}
/>
),
}}
...

您也可以使用screenOptions=｛｛｝｝设置为堆栈级别。

"导航"；以及"；路线"；也可以在屏幕道具上找到。

options={({ navigation, route }) => ({headerLeft: ...})

Answer 3

组件安装后，注册返回按钮按下监听器

componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
}

然后在功能中，您可以检查和处理操作，例如：

onBackButtonPressAndroid = () => {
// Check if the current screen is focused or a subscreen is perhaps
if (this.props.navigation.isFocused()) {
if (someCondition) {
// Do a navigation to a custom screen, pass props here if needed
this.props.navigation.navigate('search')
return true
// Return true if you want to tell react navigation you've handled the back press
}
else if (this.state.offsetTop > 10) {
// Ex. for scrolling to top
this.scrollToTop()
this.setState({
offsetTop: 0,
})
return true
}
}
// Return false if you want to tell react navigation you didn't handle the back press
return false
}

Answer 4

尝试将navigationOptions传递到特定屏幕：

export default function App(){
return(
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="FirstScreen" component={FirstScreen}/>
<Stack.Screen name="SecondScreen" component={SecondScreen}
navigationOptions: ({ navigation }) => ({ headerLeft: (<HeaderBackButton onPress={() => {}}/>)
})}}/>
</Stack.Navigator>
</NavigationContainer>
)}

您可以在navigation上指定它。或者在Second screen上，试试这个：

class SecondScreen extends React.Component {
static navigationOptions = {
headerLeft: (
<Button
onPress={() => alert('This is a back button!')}
title="Title"
color="#fff"
/>
),
};
}