React Native 如何复用代码实现两个页面同输出并支持跳转

一、DetailsScreen修改点 #

仅需要修改跳转逻辑，把当前食品参数传递到IngredientScreen，避免IngredientScreen获取route.params为空报错，找到跳转按钮的onPress配置，修改为如下代码：

onPress={() => navigation.navigate("IngredientScreen", item)}

二、IngredientScreen代码实现 #

直接复制DetailsScreen代码后，做以下几处调整即可：

1. 组件名修改为IngredientScreen
2. 页面头部标题修改为「食材信息」
3. 移除原DetailsScreen中跳转到IngredientScreen的按钮逻辑
4. 如果需要展示食材列表而非原详情介绍，可替换对应文本渲染逻辑（下面代码同时提供了食材为数组时的渲染示例，不需要可以换回item.details）

完整代码如下：

import React from "react";
import { SafeAreaView, StyleSheet, View, Text, Image } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import Icon from "react-native-vector-icons/MaterialIcons";
import COLORS from "../../consts/colors";

const IngredientScreen = ({ navigation, route }) => {
  const item = route.params;

  return (
    <SafeAreaView style={{ backgroundColor: COLORS.white }}>
      <View style={style.header}>
        <Icon name="arrow-back-ios" size={28} onPress={navigation.goBack} />
        <Text style={{ fontSize: 20, fontWeight: "bold" }}>食材信息</Text>
      </View>
      <ScrollView showsVerticalScrollIndicator={false}>
        <View
          style={{
            justifyContent: "center",
            alignItems: "center",
            height: 280,
          }}
        >
          <Image source={item.image} style={{ height: 220, width: 220 }} />
        </View>
        <View style={style.details}>
          <View
            style={{
              flexDirection: "row",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <Text
              style={{ fontSize: 25, fontWeight: "bold", color: COLORS.white }}
            >
              {item.name}
            </Text>
          </View>
          {/* 如果食材是数组格式用下面这段渲染列表，否则直接替换为<Text style={style.detailsText}>{item.details}</Text>即可 */}
          {item.ingredients?.map((ing, index) => (
            <Text key={index} style={style.detailsText}>• {ing}</Text>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const style = StyleSheet.create({
  header: {
    paddingVertical: 20,
    flexDirection: "row",
    alignItems: "center",
    marginHorizontal: 20,
  },
  details: {
    paddingHorizontal: 20,
    paddingTop: 40,
    paddingBottom: 60,
    backgroundColor: COLORS.primary,
    borderTopRightRadius: 40,
    borderTopLeftRadius: 40,
  },
  detailsText: {
    marginTop: 10,
    lineHeight: 22,
    fontSize: 16,
    color: COLORS.white,
  },
});

export default IngredientScreen;

三、补充导航注册配置 #

必须在项目的路由堆栈配置中新增IngredientScreen的注册，否则跳转时会报页面不存在的错误，示例配置如下（可根据自己的导航结构调整）：

import { createStackNavigator } from '@react-navigation/stack';
import DetailsScreen from './DetailsScreen';
import IngredientScreen from './IngredientScreen';

const Stack = createStackNavigator();

function AppStack() {
  return (
    <Stack.Navigator screenOptions={{headerShown: false}}>
      {/* 其他原有页面注册 */}
      <Stack.Screen name="DetailsScreen" component={DetailsScreen} />
      <Stack.Screen name="IngredientScreen" component={IngredientScreen} />
    </Stack.Navigator>
  );
}

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