在特定屏幕上使用反应导航修改后退按钮答案

【问题标题】：Modifying back button with react-navigation on specific screen在特定屏幕上使用反应导航修改后退按钮
【发布时间】：2018-09-03 18:19:51
【问题描述】：

这里我使用react-navigation 作为我的导航库。

如何更改特定屏幕的back 按钮（由react-navigation 自动添加）功能？

我的意思是，与其在屏幕堆栈中前进一步，我希望它在堆栈中后退 2 步，或者通过提供屏幕名称手动执行（同样仅在一个组件上）。

【问题讨论】：

Custom back navigation for reactnavigation back button的可能重复

标签： reactjs react-native react-navigation

【解决方案1】：

您可以使用该屏幕的navigationOptions 覆盖特定屏幕的后退按钮。您可以在react-navigation docs 中阅读有关覆盖后退按钮的更多信息

来自文档的示例

class HomeScreen extends React.Component {
  static navigationOptions = {
    headerTitle: <LogoTitle />,
    headerRight: (
      <Button
        onPress={() => alert('This is a button!')}
        title="Info"
        color="#fff"
      />
    ),
  };
}

覆盖后退按钮

后退按钮将自动呈现在StackNavigator 只要用户有可能从当前返回 screen — 换句话说，后退按钮将在任何时候呈现堆栈中有多个屏幕。

通常，这就是您想要的。但有可能在某些您比您更想自定义后退按钮的情况可以通过上面提到的选项，这种情况下可以指定 headerLeft，就像我们对 headerRight 所做的那样，并且完全覆盖后退按钮。

【讨论】：

有没有办法只更改onPress() 函数？我想保留最初的背景图片
@greW 我不直接相信。但是您可以检查 react-native 导航栏的源代码，看看您是否可以导入它们用于返回的相同按钮，然后覆盖 onPress 属性。但我认为使用自定义按钮会更简单。
感谢您的回答，当您帮助我实现它时，我会将其标记为答案。对于需要该箭头的人，您可以简单地导入该组件并覆盖 onPress 道具。 import { HeaderBackButton } from 'react-navigation'
@greW 你可以用你如何使用HeaderBackButton 的小例子来编辑我的答案，那将是完美的。
@greW 是否可以在导航到其他屏幕之前显示警报框以获取 HeaderBackButton 上的用户构造

【解决方案2】：

考虑一下，您分别有 3 个屏幕 A、B、C。因此，StackNavigator 中后退按钮的默认功能是：- 如果您在屏幕 C 上按返回按钮，它将带您到上一个屏幕，即屏幕 B。要覆盖它，您可以在屏幕 C 上执行以下操作：-

import { HeaderBackButton } from 'react-navigation';
static navigationOptions = ({navigation}) => {
  return{
    headerLeft:(<HeaderBackButton onPress={()=>{navigation.navigate('A')}}/>)
 }
}

【讨论】：

使用labelVisible={false}和tintColor={'#FFF'}进行更多自定义，here中的所有道具
我不能在我的代码中使用静态语句 = Declaration or statement expected.ts(1128)

【解决方案3】：

您也可以在创建堆栈导航器时执行此操作。从 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")}/>)
    })
  },
});

【讨论】：

【解决方案4】：

如果您使用的是版本 5，并且正在处理功能组件，则可以使用布局效果挂钩来完成此操作 (example from the docs reference)：

function ProfileScreen({ navigation, route }) {
  const [value, onChangeText] = React.useState(route.params.title);

  React.useLayoutEffect(() => {
    navigation.setOptions({
      title: value === '' ? 'No title' : value,
    });
  }, [navigation, value]);

请注意，如果您要更改 headerLeft，您可能需要将函数传递给它 (GH issue reference)。

【讨论】：

【解决方案5】：

默认情况下，使用 HeaderBackButton 组件。您可以实现它并使用它来覆盖后退按钮样式，按下道具，例如：链接到docs

import { HeaderBackButton } from '@react-navigation/stack';

const styles = StyleSheet.create({
  custom: {
  // Custom styles here
  }
});

<Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerLeft: (props) => (
      <HeaderBackButton
        {...props}
        style={styles.custom}
        onPress={() => {
        // Do something
        }}
      />
    ),
  }}
/>;

如果你想要完全控制，你可以使用你自定义的后退按钮组件，例如：

import { CustomBackButton } from 'path/to/custom/component';

<Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerLeft: (props) => (
      <CustomBackButton {...props} />
    ),
  }}
/>;

【讨论】：