React Native：让Stack Nav头部访问屏幕状态及其他屏幕函数

嘿，我来帮你搞定这个栈导航头部访问屏幕状态和跨组件函数调用的问题，结合你给出的组件结构，给你几个实用的方案：

这个方案不需要额外依赖，直接利用React Navigation的参数传递能力，就能让头部按钮拿到目标屏幕的状态和其他屏幕的函数。

1. 在Food屏幕传递保存回调
   先在Food.js里定义好添加数据的函数，跳转到AddItem时把这个函数作为参数传过去：

// Food.js
import { useState } from 'react';

const Food = ({ navigation }) => {
  const [foodList, setFoodList] = useState([]);

  // 定义添加食物的函数
  const addFoodItem = (newItem) => {
    setFoodList(prev => [...prev, newItem]);
    // 这里可以加其他逻辑，比如存到本地存储
  };

  // 跳转时传递回调
  const goToAddItem = () => {
    navigation.navigate('AddItem', { onSave: addFoodItem });
  };

  return (
    // 你的食物列表渲染内容
    <View>
      {/* 这里用你的AddButton，绑定goToAddItem方法 */}
    </View>
  );
};

2. 在AddItem同步表单状态到导航参数
   在AddItem.js里监听表单状态变化，用navigation.setParams把状态同步给头部的SaveButton：

// AddItem.js
import { useState, useEffect } from 'react';

const AddItem = ({ navigation }) => {
  const [formData, setFormData] = useState({ name: '', category: '' });
  // 获取从Food传过来的保存回调
  const onSave = navigation.getParam('onSave');

  // 表单状态变化时更新导航参数
  useEffect(() => {
    navigation.setParams({ formData });
  }, [formData, navigation]);

  // 处理表单输入
  const handleInputChange = (key, value) => {
    setFormData(prev => ({ ...prev, [key]: value }));
  };

  return (
    <View style={{ padding: 16 }}>
      <TextInput
        placeholder="食物名称"
        value={formData.name}
        onChangeText={(text) => handleInputChange('name', text)}
        style={{ borderBottomWidth: 1, marginBottom: 16 }}
      />
      <TextInput
        placeholder="分类"
        value={formData.category}
        onChangeText={(text) => handleInputChange('category', text)}
        style={{ borderBottomWidth: 1 }}
      />
    </View>
  );
};

3. 在SaveButton中获取状态并执行保存
   修改SaveButton.js，通过导航参数拿到表单数据和保存函数，点击时执行逻辑：

// SaveButton.js
import { TouchableOpacity, Text } from 'react-native';

const SaveButton = ({ navigation }) => {
  const handleSave = () => {
    const formData = navigation.getParam('formData');
    const onSave = navigation.getParam('onSave');
    
    if (formData?.name && onSave) {
      onSave(formData);
      navigation.goBack(); // 保存后返回列表页
    }
  };

  return (
    <TouchableOpacity onPress={handleSave} style={{ marginRight: 16 }}>
      <Text style={{ fontSize: 16, color: '#007AFF' }}>Save</Text>
    </TouchableOpacity>
  );
};

最后更新你的Router.js里的AddItem配置，确保headerRight能拿到navigation：

// Router.js
AddItem: {
  screen: AddItem,
  navigationOptions: ({ navigation }) => ({
    title: 'Add Food',
    headerRight: <SaveButton navigation={navigation} />
  })
}

如果你的应用后续会有更多跨组件共享状态或函数的需求，用Context可以避免频繁传递导航参数，代码更整洁。

1. 创建FoodContext
   新建FoodContext.js，封装食物列表的状态和操作函数：

// FoodContext.js
import { createContext, useContext, useState } from 'react';

const FoodContext = createContext();

export const FoodProvider = ({ children }) => {
  const [foodList, setFoodList] = useState([]);

  const addFoodItem = (newItem) => {
    setFoodList(prev => [...prev, newItem]);
  };

  return (
    <FoodContext.Provider value={{ foodList, addFoodItem }}>
      {children}
    </FoodContext.Provider>
  );
};

// 自定义钩子，方便组件调用
export const useFoodContext = () => useContext(FoodContext);

2. 用Provider包裹导航栈
   在根组件（比如App.js）里，用FoodProvider包裹你的FoodStack，让所有子组件都能访问Context：

// App.js
import { FoodProvider } from './FoodContext';
import { FoodStack } from './Router';

export default function App() {
  return (
    <FoodProvider>
      <FoodStack />
    </FoodProvider>
  );
}

3. 在AddItem和SaveButton中使用Context
   修改AddItem.js，直接从Context获取保存函数，然后把保存逻辑传给头部按钮：

// AddItem.js
import { useState, useEffect } from 'react';
import { useFoodContext } from './FoodContext';

const AddItem = ({ navigation }) => {
  const [formData, setFormData] = useState({ name: '', category: '' });
  const { addFoodItem } = useFoodContext();

  // 定义保存逻辑
  const handleSave = () => {
    if (formData.name) {
      addFoodItem(formData);
      navigation.goBack();
    }
  };

  // 动态设置头部按钮的点击事件
  useEffect(() => {
    navigation.setParams({ handleSave });
  }, [handleSave, navigation]);

  // ...表单输入逻辑和渲染
};

然后修改SaveButton.js，变成通用的按钮组件，直接接收点击事件：

// SaveButton.js
import { TouchableOpacity, Text } from 'react-native';

const SaveButton = ({ onPress }) => {
  return (
    <TouchableOpacity onPress={onPress} style={{ marginRight: 16 }}>
      <Text style={{ fontSize: 16, color: '#007AFF' }}>Save</Text>
    </TouchableOpacity>
  );
};

最后更新Router.js的AddItem配置：

// Router.js
AddItem: {
  screen: AddItem,
  navigationOptions: ({ navigation }) => ({
    title: 'Add Food',
    headerRight: <SaveButton onPress={navigation.getParam('handleSave')} />
  })
}

如果你的React Navigation版本是5或以上（现在主流是v6），可以用useNavigation和useRoute钩子简化代码，直接在AddItem里动态设置头部：

// AddItem.js（RN v6写法）
import { useState } from 'react';
import { useNavigation, useRoute } from '@react-navigation/native';
import { useFoodContext } from './FoodContext';
import SaveButton from './SaveButton';

const AddItem = () => {
  const navigation = useNavigation();
  const route = useRoute();
  const { addFoodItem } = useFoodContext();
  const [formData, setFormData] = useState({ name: '', category: '' });

  // 直接在组件里设置头部
  navigation.setOptions({
    headerRight: () => (
      <SaveButton 
        onPress={() => {
          if (formData.name) {
            addFoodItem(formData);
            navigation.goBack();
          }
        }} 
      />
    )
  });

  // ...表单输入逻辑
};

这种写法不需要在路由配置里设置headerRight，所有逻辑都在AddItem组件内完成，更灵活。

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