Couldn't get param in my tabs

2019-07-10 07:46发布

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

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

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;

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);



    }

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);  

1条回答
对你真心纯属浪费
2楼-- · 2019-07-10 08:25

This is good :

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

try this :

  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 })

    }
}

EDIT 2

in my createStackNavigator in dont have

navigationOptions: { header: null},

just simple 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 });
  }

}
查看更多
登录 后发表回答