React Native非导航跨屏传值及默认返回按钮回传数据方案咨询

针对你提出的两个React Native屏幕数据传递需求，这里提供两种实用方案：

方案一：React Context 跨屏数据共享（轻量首选） #

通过React Context实现全局数据共享，无需依赖导航跳转即可双向传递数据，适合小场景的状态管理。

1. 创建共享数据Context #

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

const DataContext = createContext();

export function DataProvider({ children }) {
  // 存储双向传递的数据
  const [sharedData, setSharedData] = useState({
    firstToSecond: '',
    secondToFirst: ''
  });

  // 更新第一个屏幕发给第二个的数据
  const updateFirstToSecond = (text) => {
    setSharedData(prev => ({ ...prev, firstToSecond: text }));
  };

  // 更新第二个屏幕发给第一个的数据
  const updateSecondToFirst = (text) => {
    setSharedData(prev => ({ ...prev, secondToFirst: text }));
  };

  return (
    <DataContext.Provider value={{ sharedData, updateFirstToSecond, updateSecondToFirst }}>
      {children}
    </DataContext.Provider>
  );
}

// 自定义Hook简化调用
export function useData() {
  return useContext(DataContext);
}

2. 根组件包裹Provider #

确保导航容器被DataProvider包裹（以App.js为例）：

// App.js
import { DataProvider } from './DataContext';
import { NavigationContainer } from '@react-navigation/native';
// 导入你的导航栈配置

export default function App() {
  return (
    <DataProvider>
      <NavigationContainer>
        {/* 你的导航栈代码 */}
      </NavigationContainer>
    </DataProvider>
  );
}

3. 修改FirstScreen代码 #

import { useData } from './DataContext';

export default function FirstScreen({ navigation }) {
  const { sharedData, updateFirstToSecond } = useData();

  return (
    <View>
      <TouchableOpacity onPress={() => {
        // 直接传数据给SecondScreen，无需跳转
        updateFirstToSecond('这是来自第一个屏幕的文本');
      }}>
        <View>
          <Icon name="close"></Icon>
        </View>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => navigation.navigate('secondscreen')}>
        <Text>跳转到第二个屏幕</Text>
      </TouchableOpacity>
      {/* 展示SecondScreen返回的数据 */}
      <Text>来自第二个屏幕的数据：{sharedData.secondToFirst}</Text>
    </View>
  );
}

4. 修改SecondScreen代码 #

import { useData } from './DataContext';
import { useEffect } from 'react';

export default function SecondScreen({ navigation }) {
  const { sharedData, updateSecondToFirst } = useData();

  // 监听返回按钮事件，返回时传递数据
  useEffect(() => {
    const unsubscribe = navigation.addListener('beforeRemove', () => {
      // 这里可以替换为实际需要返回的数据（比如输入框内容）
      updateSecondToFirst('这是来自第二个屏幕的文本');
    });

    return unsubscribe;
  }, [navigation, updateSecondToFirst]);

  return (
    <View>
      {/* 展示FirstScreen发送的数据 */}
      <Text>来自第一个屏幕的数据：{sharedData.firstToSecond}</Text>
    </View>
  );
}

方案二：导航参数+返回监听（无全局状态） #

如果不想用全局状态，可通过导航的参数设置和返回事件监听实现需求：

1. 修改FirstScreen代码 #

export default function FirstScreen({ navigation, route }) {
  // 获取SecondScreen返回的数据
  const returnedData = route.params?.fromSecond || '';

  return (
    <View>
      <TouchableOpacity onPress={() => {
        // 给SecondScreen设置参数，无需跳转也能存储
        navigation.dispatch({
          type: 'SET_PARAMS',
          payload: { fromFirst: '来自第一个屏幕的文本' },
          key: 'secondscreen' // 需与导航栈中SecondScreen的key一致
        });
      }}>
        <View>
          <Icon name="close"></Icon>
        </View>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => navigation.navigate('secondscreen')}>
        <Text>跳转到第二个屏幕</Text>
      </TouchableOpacity>
      <Text>来自第二个屏幕的数据：{returnedData}</Text>
    </View>
  );
}

2. 修改SecondScreen代码 #

import { useEffect } from 'react';

export default function SecondScreen({ navigation, route }) {
  // 获取FirstScreen发送的数据
  const receivedData = route.params?.fromFirst || '';

  useEffect(() => {
    const unsubscribe = navigation.addListener('beforeRemove', () => {
      // 返回时传递数据回FirstScreen
      navigation.navigate('firstscreen', {
        fromSecond: '来自第二个屏幕的文本'
      });
    });

    return unsubscribe;
  }, [navigation]);

  return (
    <View>
      <Text>来自第一个屏幕的数据：{receivedData}</Text>
    </View>
  );
}

注意事项 #

• 方案二中的key: 'secondscreen'需与导航栈中SecondScreen的实际key一致，可通过navigation.getState()查看栈内页面key。
• 方案一适合多组件共享数据的场景，方案二更依赖导航逻辑，适合简单双页传参。

内容的提问来源于stack exchange，提问作者Huy Ngô