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

Question

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

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

我的意思是我不想在屏幕堆栈中前进一步，而是希望它在堆栈中后退 2 步，或者通过提供屏幕名称（同样只在一个组件上）手动完成。

Answer 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"
      />
    ),
  };
}

Overriding the back button

The back button will be rendered automatically in a StackNavigator whenever 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 with headerRight, and completely override the back button.

Answer 2

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

上执行类似的操作

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

Answer 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")}/>)
    })
  },
});

Answer 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)。

Answer 5

默认情况下，使用 HeaderBackButton 组件。您可以实现它并使用它来覆盖后退按钮样式，按下道具，例如： link 到 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} />
    ),
  }}
/>;

Answer 6

您有 A、B、C 屏幕。你目前是A，触摸组件后你输入了B。现在您在屏幕 B 中。在屏幕 B 中，您的代码可以像下面的示例一样执行：

// after event
navigation.pop();  // The B screen will delete
navigation.navigate("YourNextScreen");  // The C you are switching

现在您在 C。如果您使用 back 按钮，您将返回 A。

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

Modifying back button with react-navigation on specific screen

reactjs

react-native

react-navigation