在特定屏幕上使用react-navigation修改后退按钮

Question

我正在使用react-navigation我的导航库,我想知道如何更改react-navigation特定屏幕的"后退"按钮(由自动添加)功能？

我的意思是不是在屏幕堆栈中走一步,而是希望它在堆栈中向后走2步.或者通过给它一个屏幕名称手动完成(再次只在一个组件上).

谢谢.

Answer 1

考虑一下,你有3个屏幕A,B,C.因此,StackNavigator中后退按钮的默认功能是: - 如果您按下屏幕C上的后退按钮,它将转到上一个屏幕,即屏幕B.要覆盖它,您可以在屏幕C上执行此类操作: -

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

Answer 2

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

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 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，并且正在处理功能组件，则可以使用布局效果挂钩来完成此操作（来自文档参考的示例）：

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 问题参考）。

Answer 5

您可以使用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 时，它可以为用户从他们的当前屏幕回去-换句话说，只要有在堆栈超过一分屏后退按钮将被渲染。

通常，这就是您想要的。但它可能在某些情况下，你要自定义后退按钮比你更可以通过上面提到的选项，在这种情况下，你可以指定一个headerLeft，就像我们做了与headerRight，和完全覆盖的后退按钮。