Question

我想使用传递给“个人资料屏幕”的参数，并且他位于单独的应用容器中，

然后我创建TopTab并将其放入特定的AppContainer中，因为我无法在一个AppContainer中使用它，因此我如何从另一个AppContainer中获取这些参数？

所以我的代码在这里

第一件事，现在我在“地图屏幕”中，想要导航到个人资料屏幕并传递一些这样的参数

this.props.navigation.navigate('ProviderProfile', {
    providerId: marker.id,
    providerName: marker.name,
    providerService: marker.service,
    gKey: marker.gKey,
    token: marker.token._55,
    region: region
}

这里是Profile Screen，其中包含 Card 和 TobTabs “我将其包装在单独的AppContainer中” 并想使用我在这些“ TopTabs”中“每个标签页”中传递的参数，以便如何处理这些OR或将这些参数传递给每个标签页？

ProviderProfile.js

import React, { Component } from "react";
import Icon from "react-native-vector-icons/Ionicons";
import firebase from "react-native-firebase";

import { createAppContainer } from "react-navigation";

import { NavTabs } from "./ProviderTabs/NabTabs";
import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native";
console.disableYellowBox = true;

class ProviderProfile extends Component {
  static navigationOptions = ({ navigation }) => {
    const { state } = navigation;
    return {
      title: ` ${state.params.providerName}` || "profile"
    };
  };

  constructor(props) {
    super(props);
    this.state = {
      providerId: this.props.navigation.getParam("providerId"),
      providerService: this.props.navigation.getParam("providerService"),
      providerName: this.props.navigation.getParam("providerName"),
      gKey: this.props.navigation.getParam("gKey"),
      token: this.props.navigation.getParam("token"),
      region: this.props.navigation.getParam("region"),
      fav: false
    };
  }

  _addToFavorite = () => {
    const { providerName, providerService, providerId, fav } = this.state;
    const currentUser = firebase.auth().currentUser.uid;
    this.setState({ fav: !fav });
    const ref = firebase
      .database()
      .ref(`favorites/${currentUser}/${providerId}`);
    if (!fav) {
      ref
        .set({
          ProviderId: providerId,
          providerName: providerName,
          providerService: providerService
        })
        .then(() => alert("Great, Added to your favorite list"));
    } else {
      ref.remove();
    }
  };
  render() {
    const {
      providerName,
      providerService,
      providerId,
      fav,
      gKey,
      region,
      token
    } = this.state;
    return (
      <View style={styles.container}>
        {/* <Text>{gKey}</Text> */}
        <Image
          resizeMode="contain"
          source={require("../assets/marker.png")}
        />

        <View>
          <View>
            <Icon
              name={`ios-heart${fav ? "" : "-empty"}`}
              size={35}
              color="#f00"
              onPress={this._addToFavorite}
            />
          </View>
          <Text>
            <Icon name="ios-star" size={20} color="#f2ba13" />
            <Icon name="ios-star" size={20} color="#f2ba13" />
            <Icon name="ios-star" size={20} color="#f2ba13" />
            <Icon name="ios-star-half" size={20} color="#f2ba13" />
            <Icon name="ios-star-outline" size={20} color="#f2ba13" />
          </Text>
          <Text style={{ fontSize: 19, color: "#000", padding: 5 }}>
            {providerName}
          </Text>
          <Text>
            Service: <Text>{providerService}</Text>
          </Text>

          <View style={{ flexDirection: "row", marginTop: 10 }}>
            <TouchableOpacity
              onPress={() => alert("Message")}
            >
              <Text>
                Message
              </Text>
            </TouchableOpacity>

            <TouchableOpacity

              onPress={() =>
                this.props.navigation.navigate("Order", {
                  providerName,
                  providerId,
                  providerService,
                  gKey,
                  token,
                  region
                })
              }
            >
              <Text

              >
                Send Order
              </Text>
            </TouchableOpacity>
          </View>
        </View>
        <Roots /> // Here's Tabs 
      </View>
    );
  }
}


const Roots = createAppContainer(NavTabs);
export default ProviderProfile;

这是选项卡屏幕“ NavTabs”

import {
  createMaterialTopTabNavigator,
} from "react-navigation";
import AboutScreen from "./About";
import GalaryScreen from "./Galary";
import ReviewsScreen from "./Reviews";
export const NavTabs = createMaterialTopTabNavigator(
  {
    About: { screen: AboutScreen },
    Galaty: { screen: GalaryScreen },
    Reviews: { screen: ReviewsScreen }
  },
  {
    tabBarOptions: {
      activeTintColor: "#fff",
      inactiveTintColor: "#ddd",
      tabStyle: {
        justifyContent: "center"
      },
      indicatorStyle: {
        backgroundColor: "#fcc11e"
      },
      style: {
        backgroundColor: "#347ed8"
      }
    }
  }
);

如您所见，我想在选项卡“关于” 中使用用户名或其他标签

Answer 1

发送参数：

var window: UIWindow? func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) { guard let windowScene = scene as? UIWindowScene else { return } let window = UIWindow(windowScene: windowScene) let storyboard = UIStoryboard(name: "Welcome", bundle: nil) if Auth.auth().currentUser != nil { window.rootViewController = storyboard.instantiateViewController(withIdentifier: IDENTIFIER_TABBAR) } else { window.rootViewController = storyboard.instantiateViewController(withIdentifier: IDENTIFIER_WELCOME) } self.window = window window.makeKeyAndVisible() }

获取参数：

this.props.navigation.navigate('RouteName', { /* params go here */ })

示例：

this.props.navigation.getParam(paramName, defaultValue)

this.props.navigation.navigate('NameListScreen', { names:["John","Mary"] })

Answer 2

我自己还没有使用React Navigation，但是在他们的documentation中，您可以将道具传递给App Containers，因此您已经使用{{1 }}，您应该将它们作为props传递，其中将MapScreen组件定义为props

此外，还有一种可以实现的here中存在的替代方法，并且可以通过redux方式完成。

如何在其他App容器中获取参数-React Navigation？

2 个答案: