Question

我是一名新的React原生程序员。我试图将Params从StackNavigator传递给TabNavigator但是当我尝试使用this.props.navigation.state.params打印params时，它是未定义的。我试图将用户的名称从提取传递到新屏幕

Auth.js

export const onVerify = (email,password,navigation) => {
          console.log('Verifying');
          fetch('xxx',
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: 'email=' + email + '&password=' + password
            })

            .then((response) => response.json())
            .then((responseJson) => {
                if(responseJson.status == '200') {
                  Alert.alert(
                    'Login Successful',
                    'Welcome Home'
                  );

                  let data = {
                      name: responseJson.name,
                      id : responseJson.id
                  };
                  console.log(data.name)
                  onSignIn().then(() => navigation.navigate("SignedIn"),data);
                }
            })
            .catch((error) => {
                console.error(error);
            });

          }

这是我的router.js

export const SignedOut = StackNavigator({
  SignUp: {
    screen: SignUp,
    navigationOptions: {
      title: "Sign Up",
      headerStyle
    }
  },
  SignIn: {
    screen: SignIn,
    navigationOptions: {
      title: "Sign In",
      headerStyle
    }
  }
});

export const SignedIn = TabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: "Home",
        tabBarIcon: ({ tintColor }) => (
          <FontAwesome name="home" size={30} color={tintColor} />
        )
      }
    },
    Profile: {
      screen: Profile,
      navigationOptions: {
        tabBarLabel: "Profile",
        tabBarIcon: ({ tintColor }) => (
          <FontAwesome name="user" size={30} color={tintColor} />
        )
      }
    }
  },
  {
    tabBarOptions: {
      style: {
        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
      }
    }
  }
);

有什么想法吗？

Answer 1

你发错误的方式，

旧：

onSignIn().then(() => navigation.navigate("SignedIn"),data); //wrong

新：

onSignIn().then(() => navigation.navigate("SignedIn", data)); //correct

来自React-Navigation的文档，

将params作为第二个将它们放入一个物体中 navigation.navigate函数的参数： this.props.navigation.navigate（＆＃39; RouteName＆＃39;，{/ * params go here * /}）

从StackNavigator传递参数到TabNavigator

1 个答案: