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

Posted 2023-02-22

【中文标题】在特定屏幕上使用反应导航修改后退按钮

【英文标题】：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的可能重复

【参考方案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 />
    ),
  
/>;