无法在我的选项卡中获取参数 [英] Couldn't get param in my tabs

问题描述

我有带有 2 个选项卡的登录和主屏幕...我正在使用导航将用户传递到主屏幕('主'，{用户:用户}，我无法使用 this.props 在我的主屏幕中获取该用户.navigation.getParam('user'). 我的错误是:未定义

I have Login and MAIN screen with 2 tabs...I'm passing user to MAIN screen with navigate('MAIN',{user: user} and I couldn't get that user in my MAIN with this.props.navigation.getParam('user'). My error is: undefined

当我调试时:Reactotron.log(this.props);我在构造函数的主屏幕中未定义.

When I debug with : Reactotron.log(this.props); I'm getting undefined in my Main screen in constructor.

我在 App.js 中的代码在哪里路由

My code in App.js where is routes

 const Routes = createStackNavigator(
  {
    Login: {
      screen: Login,

      navigationOptions: ({ navigation }) => ({
          header: null,
        }),

    },
    Main: {
      screen: MainScreenRoutes,
      navigationOptions: ({navigation}) => ({
        header: null,
      }),
    },
  },
  {
    initialRouteName: 'Login',
    headerMode: 'screen',
    navigationOptions: {
      ...HeaderStyles,
      animationEnabled: true
    }
  }
);

export default Routes;

MainRoutes 中的代码:

Code in MainRoutes:

let headerDefaultNavigationConfig = {
  header: props => <CustomHeader {...props} />,
  ...HeaderStyles
};

const Tab1 = createStackNavigator(
  {
    Domov: {
      screen: HomeScreen,
      navigationOptions: {
      },

    },
  },
  {
     navigationOptions: ({ navigation }) => ({
      ...headerDefaultNavigationConfig
    }),
  }
);

const Tab2 = createStackNavigator(
  {
    Dnevnik: {
      screen: Diary,
      navigationOptions: {

      },
    }
  },
  {
    navigationOptions: ({ navigation }) => ({
      ...headerDefaultNavigationConfig
    }),

  }
);

const bottomTabs = createBottomTabNavigator(
{
  Domov: Tab1,
  Dnevnik: Tab2,
},
{
  initialRouteName: "Domov",
  navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Domov') {
          //iconName = `home${focused ? '' : '-outline'}`;
          iconName='home';
        } else if (routeName === 'Dnevnik') {
          //iconName = `ios-calendar${focused ? '' : '-outline'}`;
          iconName='ios-calendar';
        } 

        // if focused return view with line
        if(focused) {
          return (
            <View style={styles.item}>
                <Icon name={iconName} style={{fontSize: 20, color: '#FFF'}} />
                <View style={styles.line}></View>
            </View>
          );
        } else {
          return(
            <Icon name={iconName} style={{fontSize: 20, color: '#FFF'}} />
          )
        }

      },

    }),
    tabBarPosition: 'bottom',
    tabBarOptions: {
      activeTintColor: 'white',
      showLabel: false,
      inactiveTintColor: '#4C2601',
      style: {
        backgroundColor: '#033D51',
      },
      labelStyle: {
        fontSize: 12,
        lineHeight: 30,
      },
    },
    swipeEnabled: true,

});

const All = createStackNavigator(
{
  "Home":{
    screen: bottomTabs,
    navigationOptions: {
        header: null,
    },
  },
  "MyProfil":{
    screen: MyProfil,
    navigationOptions: ({ navigation }) => ({
      ...headerDefaultNavigationConfig,
      headerTitle: 'Moj profil',

    }),
  }, 
  "Help": {
    screen: Help,
    navigationOptions: ({ navigation }) => ({
      ...headerDefaultNavigationConfig,
      headerTitle: 'Pomoč',

    }),
  }
},
{
    initialRouteName: 'Home',
    headerMode: 'screen',
    navigationOptions: {
      ...HeaderStyles,
      animationEnabled: true
    }
}



);


export default All;

主屏幕中的代码:该警报给我未定义

Code in HomeScreen: That alert gives me undefined

constructor(props) {
        super(props);

        let user = props.navigation.getParam('user');

        alert(user);



    }

Login.js 中的代码，我使用标签导航到该屏幕；

Code in Login.js where I navigate to that screen with tabs;

var obj = {
     id: json.user.id,
     lastname: json.user.lastname,
     name: json.user.name,
     email: json.user.email,
      user: json.user.user,
 };
 _storeData(obj);


 setTimeout(() => {
    navigate("Main",{user: JSON.stringify(obj)});
 },1300);  

推荐答案

这很好:

  this.props.navigation.navigate("HomeScreen", { user :user });

试试这个:

  let user = props.navigation.state.params.user ;

由于每个应用程序启动只调用一次构造函数，试试这个

EDIT : as the constructor is called only one time for each app start try this

import _ from "lodash";
...

constructor(props){ super(props) ; console.log("main constructor ") ;  ... } 

componentWillReceiveProps(nextProps) {
    console.log(JSON.stringify(nextProps.navigation.state.params)) 
    if (_.has(nextProps, "navigation.state.params.user")) {
      console.log(nextProps.navigation.state.params.user );

        this.setState({ user: nextProps.navigation.state.params.user })

    }
}

编辑 2

在我的 createStackNavigator 中没有

in my createStackNavigator in dont have

navigationOptions: { header: null},

只是简单的stack1: { screen: stack1 },

但是在我的堆栈屏幕组件中我有这个

but in my stack screen component i have this

export default class stack1 extends React.PureComponent {

  static navigationOptions = ({ navigation }) => ({ header: null });

  constructor (props) {
    super(props);

    this.state = {  };
  }
  componentDidMount() {
    this.setState({ obsToEdit: this.props.navigation.state.params.obs, dataready: true });
  }

}

这篇关于无法在我的选项卡中获取参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！