React Navigation：如何在TabNavigator的不同屏幕间传递数据？

这个问题我之前也碰到过！核心原因是你用setParams设置的参数只属于HomeStack这个导航器的路由，而SettingsScreen属于独立的SettingsStack——两个同级的StackNavigator之间的路由参数是不共享的，所以你在SettingsScreen里自然拿不到HomeScreen设置的results。

下面给你两个不用Redux的解决方案，都是基于React和react-navigation本身的特性：

方法一：父组件维护共享状态 + screenProps传递 #

把共享数据放在包裹TabNavigator的父组件里，通过screenProps把数据和更新方法传递给所有子屏幕，这是最简单直观的方式：

import React from 'react';
import { Button, Text, View } from 'react-native';
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  doIt = () => {
    // 调用父组件传过来的方法更新共享状态
    this.props.screenProps.setResults(['one', 'two']);
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button title="Set Results" onPress={this.doIt} />
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    // 从screenProps中获取共享数据
    const { results } = this.props.screenProps;
    console.log('拿到的结果：', results);
    
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings</Text>
        {results && (
          <Text>传递过来的数据：{results.join(', ')}</Text>
        )}
      </View>
    );
  }
}

const HomeStack = createStackNavigator({ Home: HomeScreen });
const SettingsStack = createStackNavigator({ Settings: SettingsScreen });
const TabNavigator = createBottomTabNavigator({ Home: HomeStack, Settings: SettingsStack });

// 父组件维护共享状态，并通过screenProps传递给所有子屏幕
export default class App extends React.Component {
  state = { results: null };

  setResults = (newResults) => {
    this.setState({ results: newResults });
  };

  render() {
    return (
      <TabNavigator 
        screenProps={{
          results: this.state.results,
          setResults: this.setResults
        }} 
      />
    );
  }
}

原理说明 #

• 共享数据存在最外层的App组件状态里，保证所有子屏幕都能访问到
• screenProps是react-navigation提供的用于给所有导航器内屏幕传递额外props的属性，不管是Tab还是Stack里的屏幕都能拿到

方法二：React Context（适合复杂场景） #

如果你的项目后续有更多组件需要共享这个数据，用React Context可以避免层层传递props的麻烦：

import React, { createContext } from 'react';
import { Button, Text, View } from 'react-native';
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';

// 创建共享数据的Context
const ResultsContext = createContext();

// Context提供者组件，负责维护状态
const ResultsProvider = ({ children }) => {
  const [results, setResults] = React.useState(null);
  
  return (
    <ResultsContext.Provider value={{ results, setResults }}>
      {children}
    </ResultsContext.Provider>
  );
};

class HomeScreen extends React.Component {
  render() {
    return (
      <ResultsContext.Consumer>
        {({ setResults }) => (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Button 
              title="Set Results" 
              onPress={() => setResults(['one', 'two'])} 
            />
          </View>
        )}
      </ResultsContext.Consumer>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <ResultsContext.Consumer>
        {({ results }) => (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Settings</Text>
            {results && (
              <Text>传递过来的数据：{results.join(', ')}</Text>
            )}
            <Text>调试信息：{JSON.stringify(results)}</Text>
          </View>
        )}
      </ResultsContext.Consumer>
    );
  }
}

const HomeStack = createStackNavigator({ Home: HomeScreen });
const SettingsStack = createStackNavigator({ Settings: SettingsScreen });
const TabNavigator = createBottomTabNavigator({ Home: HomeStack, Settings: SettingsStack });

// 用Provider包裹整个TabNavigator，让所有子组件都能访问Context
export default () => (
  <ResultsProvider>
    <TabNavigator />
  </ResultsProvider>
);

原理说明 #

• React Context允许你在组件树中跨层级共享数据，不需要手动传递props
• ResultsProvider负责维护共享状态，所有被它包裹的组件都能通过ResultsContext.Consumer或者自定义Hook（函数组件更方便）获取数据和更新方法

这两种方法都不需要引入额外的状态管理库，完全基于React和react-navigation的特性就能解决你的问题。

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