reactjs 在特定屏幕上使用反应导航修改后退按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49477330/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modifying back button with react-navigation on specific screen
提问by greW
I'm using react-navigationas my navigation lib, and I wonder how can I change the 'back' button (that is added automatically by react-navigation) functionality for a specific screen?
我react-navigation用作我的导航库，我想知道如何更改react-navigation特定屏幕的“后退”按钮（由 自动添加）功能？
I mean instead of going one step in the stack of screens I want it to go 2 steps back in stack. or do it manually by giving it a screen name (again only on one component).
我的意思是，与其在屏幕堆栈中走一步，我希望它在堆栈中退后两步。或者通过给它一个屏幕名称来手动完成（再次仅在一个组件上）。
thanks.
谢谢。
采纳答案by bennygenel
You can override back button for a specific screen with navigationOptionsof that screen. You can read more info about overriding back button in react-navigationdocs
您可以使用navigationOptions该屏幕覆盖特定屏幕的后退按钮。您可以在文档中阅读有关覆盖后退按钮的更多信息react-navigation
Example from docs
来自文档的示例
class HomeScreen extends React.Component {
static navigationOptions = {
headerTitle: <LogoTitle />,
headerRight: (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color="#fff"
/>
),
};
}
Overriding the back button
The back button will be rendered automatically in a
StackNavigatorwhenever it is possible for the user to go back from their current screen — in other words, the back button will be rendered whenever there is more than one screen in the stack.Generally, this is what you want. But it's possible that in some circumstances that you want to customize the back button more than you can through the options mentioned above, in which case you can specify a
headerLeft, just as we did withheaderRight, and completely override the back button.
覆盖后退按钮
StackNavigator只要用户有可能从当前屏幕返回，就会在 a 中自动呈现后退按钮——换句话说，只要堆栈中有多个屏幕，就会呈现后退按钮。一般来说，这就是你想要的。但是，在某些情况下，您可能希望通过上述选项自定义后退按钮，而在这种情况下，您可以指定
headerLeft，就像我们headerRight对后退按钮所做的那样，并完全覆盖后退按钮。
回答by Varun Gupta
Consider, that you have 3 screens A, B, C respectively. So, the default functionality of the back button in StackNavigator is:- If you press the Back Button on screen C, it will take you to the previous screen i.e, screen B. To override that you could do something like this on screen C:-
考虑一下，您分别有 3 个屏幕 A、B、C。因此，StackNavigator 中后退按钮的默认功能是：- 如果您按下屏幕 C 上的后退按钮，它将带您到上一个屏幕，即屏幕 B。要覆盖它，您可以在屏幕 C 上执行以下操作： ——
import { HeaderBackButton } from 'react-navigation';
static navigationOptions = ({navigation}) => {
return{
headerLeft:(<HeaderBackButton onPress={()=>{navigation.navigate('A')}}/>)
}
}
回答by Rubek Joshi
You can do this while creating the stack navigator as well. Updated as of react-navigation v4.
您也可以在创建堆栈导航器时执行此操作。从 react-navigation v4 开始更新。
import { createStackNavigator, HeaderBackButton } from "react-navigation-stack";
const yourStackNavigator = createStackNavigator({
SomeRoute: SomeScreen,
SpecificRoute: {
screen: SpecificScreen,
navigationOptions: ({ navigation }) => ({
headerLeft: (<HeaderBackButton onPress={_ => navigation.navigate("Somewhere")}/>)
})
},
});
回答by twelve17
If you are on version 5, and are dealing with a functional component, you can use a layout effect hook to accomplish this (example from the docs reference):
如果您使用的是版本 5，并且正在处理功能组件，则可以使用布局效果挂钩来完成此操作（来自文档参考的示例）：
function ProfileScreen({ navigation, route }) {
const [value, onChangeText] = React.useState(route.params.title);
React.useLayoutEffect(() => {
navigation.setOptions({
title: value === '' ? 'No title' : value,
});
}, [navigation, value]);
Note that if you are changing headerLeft, you may need to pass a function to it (GH issue reference).
请注意，如果您要更改headerLeft，则可能需要将函数传递给它（GH 问题参考）。
