react-navigation(5.x)新版本使用（五）之自定义header返回键

写作时间：2020/4/26
React-Native版本：0.62
React-Navigation版本：5.X

react-navigation在实现页面跳转的过程中，会自动为页面添加返回键，但是有些特殊的情况下，需要对返回键进行自定义，从而实现更为复杂的功能。以下是针对新版本（5.x）的自定义header按键实例，主要展示如何对页面顶部的左右按键进行设置，实现自己所需要的功能。整个案例共两个界面，如下图所示

上面这个图是首页，显然我对顶部的左右按键进行了自定义

上面这个图是次级页面，该页面不做任何特殊处理，可以看出navigation为其自动添加了返回键

整个案例的实现代码如下，如需运行代码，只需新建一个RN工程，将以下代码替换App.js中的代码即可

import React from 'react';
import {Button, View, Text, Alert} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home!</Text>
    </View>
  );
}

function DetailScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Detail!</Text>
    </View>
  );
}

const Stack = createStackNavigator();

export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="HomeScreen"
            component={HomeScreen}
            options={({navigation}) => ({
              headerRight: () => (
                <Button
                  title="右边"
                  onPress={() => {
                    navigation.push('DetailScreen');
                  }}
                />
              ),
              headerLeft: () => {
                return (
                  <Button
                    title="左边"
                    onPress={() => {
                      Alert.alert('haha');
                    }}
                  />
                );
              },
            })}
          />
          <Stack.Screen name="DetailScreen" component={DetailScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

通过以上代码不难看出，新版本（5.x）在一些实现细节上做了改动和调整。需要注意的是，如果自定义按键需要实现页面跳转的话，那么在options中必须传入{navigation}参数。