如何将React Navigation返回按钮与WebView集成并为Stack.Screen添加navigationOptions

你看到的旧版本navigationOptions配置语法，在v5及后续版本中已被Stack.Screen的options属性替代，你当前使用的API本身就是正确的，只需调整部分写法即可对齐你需要的配置效果。

核心配置规则 #

• 静态配置：无需调用导航/路由参数时，直接给options传配置对象即可，对应旧版本静态navigationOptions的效果
• 动态配置：需要获取navigation/route参数时，给options传入回调函数，回调入参为{navigation, route}，返回配置对象，和旧版本navigationOptions的回调用法完全一致
• 全局配置：所有页面通用的配置可以统一放在Stack.Navigator的screenOptions属性中，避免重复编写
• 注意：v5+版本中navigation.getParam已废弃，参数统一从route.params中获取

对齐你需求的完整修改代码 #

import React from "react";
import { StyleSheet } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import {
  createStackNavigator,
  HeaderBackButton,
} from "@react-navigation/stack";
import Home from "./screens/Home";
import Details from "./screens/Details";
// 注意：你原代码中Home页用了Tabs组件，若确实使用底部导航请补充导入Tabs
// import Tabs from './你的Tabs组件路径'
import Icon from "react-native-vector-icons/FontAwesome";

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: true,
        }}
      >
        {/* 对应旧版本静态navigationOptions配置 */}
        <Stack.Screen 
          name="Home" 
          component={Home} /* 若用Tabs就替换成Tabs */ 
          options={{
            headerTitle: 'Index'
          }}
        />
        {/* 对应旧版本动态navigationOptions配置 */}
        <Stack.Screen
          name="Details"
          component={Details}
          options={({ navigation, route }) => ({
            headerTitle: "Details",
            headerLeft: (props) => {
              // 废弃的getParam写法替换为从route.params取值
              const headerLeftInfo = route.params?.headerLeftInfo;

              if (headerLeftInfo) {
                return (
                  <HeaderBackButton
                    {...props}
                    title={headerLeftInfo.title}
                    onPress={headerLeftInfo.onPress}
                  />
                );
              }
              return <HeaderBackButton {...props} />;
            },
          })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

const styles = StyleSheet.create({});

新旧写法对应关系 #

你期望的旧版本配置，和新版本写法的对应关系如下：

内容的提问来源于stack exchange，提问作者questerstudios