React Native中如何将Train.js的voiceData导出至Result.js？

方法一：导航跳转时直接传参（推荐） #

这是两个页面间传递数据最直接的方式，适合一次性跳转传参的场景。

修改Train.js的跳转逻辑 #

在toResult函数里，把voiceData作为参数传入navigate方法：

const Train = () => {
  const [user] = useAuth()
  let [started, setStarted] = useState(false);
  let [results, setResults] = useState([]);
  const [voiceData, setVoiceData] = useState([]);
  
  const navigation = useNavigation()
  const toResult = () => {
    // 传递voiceData参数到Result页面
    navigation.navigate('Result', { voiceData });
  }

  // 组件其他逻辑...
}

在Result.js中接收参数 #

通过useRoute钩子获取路由参数，同时添加默认值避免页面直接打开时报错：

import { useRoute } from '@react-navigation/native';
// 导入其他必要依赖...

const Result = () => {
  const route = useRoute();
  // 用可选链和默认值处理参数不存在的情况
  const voiceData = route.params?.voiceData || [];

  return (
    <View style={styles.container}>
      {/* 数组直接显示会是[object Object]，所以转成字符串或遍历渲染 */}
      <Text>{JSON.stringify(voiceData)}</Text>
      {/* 如果要遍历数组渲染每个元素，可以这样写：
      {voiceData.map((item, index) => (
        <Text key={index}>{item}</Text>
      ))}
      */}
    </View>
  );
};

方法二：全局状态管理（适合多页面共享数据） #

如果voiceData需要在多个页面中使用，可以用React Context或者Redux来管理全局状态。

简单示例（React Context） #

1. 创建一个Context文件：

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

const VoiceContext = createContext();

export const VoiceProvider = ({ children }) => {
  const [voiceData, setVoiceData] = useState([]);

  return (
    <VoiceContext.Provider value={{ voiceData, setVoiceData }}>
      {children}
    </VoiceContext.Provider>
  );
};

export const useVoice = () => useContext(VoiceContext);

2. 在根组件中包裹Provider：

// App.js或导航根组件
import { VoiceProvider } from './VoiceContext';

export default function App() {
  return (
    <VoiceProvider>
      {/* 导航组件或其他根组件 */}
    </VoiceProvider>
  );
}

3. 在Train.js中更新全局状态：

const Train = () => {
  const { setVoiceData } = useVoice();
  // 当需要更新voiceData时，调用setVoiceData
  // 比如：setVoiceData(newVoiceData);

  // 跳转逻辑不需要传参，直接导航即可
  const toResult = () => {
    navigation.navigate('Result');
  }

  // 其他逻辑...
}

4. 在Result.js中获取全局状态：

const Result = () => {
  const { voiceData } = useVoice();

  return (
    <View style={styles.container}>
      <Text>{JSON.stringify(voiceData)}</Text>
    </View>
  );
};

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