React Native中StackNavigator向TabNavigator传递参数的问题

嘿，我来帮你搞定这个问题！你遇到的核心问题有两个：一是参数没法从Stack页面传到Tab组件里，二是之前的封装方式导致子页面丢失了navigation属性，所以没法跳转。下面给你两种可行的解决方案：

方案一：用screenProps给所有Tab子页面传递公共参数 #

这种方式适合你需要给Tab下的所有页面（比如Page1和Page2）都传递同一个参数的场景：

1. 先调整你的Base组件，把参数通过screenProps传给Tab：

import React, { Component } from "react";
import { TabNavigator } from "react-navigation";
import Page1 from './tab/page1.js';
import Page2 from './tab/page2.js';

const Tab = TabNavigator({
  Page1: { screen: Page1 },
  Page2: { screen: Page2 },
}, {
  tabBarPosition: "bottom",
  swipeEnabled: false,
  animationEnabled: false,
} );

class Base extends Component {
  constructor(props) {
    super(props);
    // 直接从navigation参数里取notif，设置默认值避免报错
    this.state = { notif: this.props.navigation.state.params?.notif || 0 };
  }

  render() {
    // 通过screenProps把参数传递给Tab的所有子页面
    return <Tab screenProps={{ notif: this.state.notif }} />;
  }
}

// 注意：现在要把Base作为StackNavigator的一个screen导出，而不是直接导出Tab
// 比如你的主Stack应该这样定义：
// const AppStack = StackNavigator({
//   // 你的其他页面
//   PreviousPage: { screen: PreviousPage },
//   // Tab页面入口是Base
//   TabContainer: { screen: Base }
// });
// export default AppStack;

2. 在Page1或Page2里获取参数，同时正常使用导航：

// Page1.js示例
import React, { Component } from "react";
import { View, Text, Button } from "react-native";

class Page1 extends Component {
  render() {
    // 通过screenProps拿到传递过来的notif
    const { notif } = this.props.screenProps;
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>通知数量：{notif}</Text>
        {/* 这里依然可以正常使用navigation跳转 */}
        <Button
          title="跳转到其他页面"
          onPress={() => this.props.navigation.navigate('AnotherPage')}
        />
      </View>
    );
  }
}

export default Page1;

方案二：直接将Tab作为Stack的screen，子页面通过navigation.getParam取参 #

如果你的参数只需要给某个Tab页面，或者更倾向于用导航参数的方式传递，可以这样做：

1. 保持你的Tab定义不变，直接把它作为StackNavigator的一个screen：

// 主Stack定义示例
const AppStack = StackNavigator({
  PreviousPage: { screen: PreviousPage },
  // 直接把Tab作为Stack的一个页面
  TabScreen: { screen: Tab }
});

2. 在之前的页面跳转到Tab页面时传递参数：

// 比如在PreviousPage里的跳转逻辑
this.props.navigation.navigate('TabScreen', { notif: 5 });

3. 在Page1或Page2里直接获取参数：

// Page2.js示例
import React, { Component } from "react";
import { View, Text, Button } from "react-native";

class Page2 extends Component {
  render() {
    // 用navigation.getParam获取参数，第二个参数是默认值
    const notif = this.props.navigation.getParam('notif', 0);
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>通知数量：{notif}</Text>
        <Button
          title="去详情页"
          onPress={() => this.props.navigation.navigate('DetailPage')}
        />
      </View>
    );
  }
}

export default Page2;

为什么你之前的方法不行？ #

你之前的代码里，Base组件虽然接收了参数，但返回<Tab/>时没有把navigation或者参数传递给Tab，而且最后还是export default Tab，导致Base组件根本没被使用到。同时，Tab没有拿到正确的navigation属性，所以它的子页面自然也没法使用导航功能。

选一个适合你需求的方案试试吧，两种方式都能解决你的问题～

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