Question

摘要

当我使用React Navigation从一条路线导航到另一条路线时，我试图传递一个对象。我也无法在导航的屏幕上接收到该对象，因为该对象位于另一个导航堆栈中。如果有人知道怎么做，那就太好了！

在BottomTabNavigator中执行Profile: { screen:ProfileScreen }时，我可以在ProfileScreen中接收道具，但是当我进行Profile: { screen: ProfileStack }时，我无法传递道具。

好像我的navigation.state.params没有从BottomTabNavigation传递到StackNavigator，因为我也在导航的屏幕上控制台记录了道具。有谁知道该怎么做？

代码

导航堆栈

const ProfileStack = createStackNavigator(
  {
    Default: {
      screen: ProfileScreen
    },
    Settings: {
      screen: SettingsScreen
    }
  },
  stackConfig
);

const BottomTabNav = createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen
    },
    Competitions: {
      screen: Competitions
    },
    Profile: {
      screen: ProfileStack
    },
  },
  {
    tabBarComponent: CustomTabNav,
    initialRouteName: "Home"
  }
);

开始屏幕（位于BottomTabNav中的主页）

const HomeScreen = () => {
  const { eSportsUsername } = useSelector(state => state.user.userData);
  console.log("eSportsUsernamebb", eSportsUsername); //This is defined 

  return (
    <View style={styles.container}>
        <TouchableOpacity
          style={styles.topNavIcons}
          onPress={() =>
            NavigationService.navigate("Profile", { eSportsUsername })
          }
        >
          <Image
            style={styles.topNavIcons}
            source={require("~/assets/images/profile.png")}
          />
        </TouchableOpacity>

    </View>
  );
};

export default HomeScreen;

屏幕也已导航（ProfileStack中的配置文件）

const ProfileScreen = props => {
  const eSportsUsername = useNavigationParam("eSportsUsername");
  console.log("props", props);
  console.log("testtest", eSportsUsername);
  return (
    <View style={styles.container}>
      <Header header={eSportsUsername} />
      <View style={styles.body}>
        <TouchableOpacity
          style={styles.settingsTouch}
          onPress={() => NavigationService.navigate("Settings")}
        >
          <Image
            style={styles.settingsImage}
            source={require("../../assets/images/settingsIcon.png")}
          />
        </TouchableOpacity>
      </View>
    </View>
  );
};

Answer 1

您尝试过吗？

Profile: { screen: props => <ProfileStack {...props} whatEverPropsYouWant={} /> }

从BottomTabNavigator到StackNavigator反应导航传递道具

1 个答案: