Question

我有两个选项卡的“登录”和“主”屏幕...通过导航将用户传递到主屏幕（“主”，{user：user}，并且无法通过this.props在我的主用户中找到该用户.navigation.getParam（'user'）。我的错误是：未定义

当我调试时： Reactotron.log（this.props）;我在构造函数的主屏幕中未定义。

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

 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中的代码：

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;

主屏幕中的代码：该警报使我无法定义

constructor(props) {
        super(props);

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

        alert(user);



    }

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

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

Answer 1

这很好：

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

尝试：

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

编辑：因为每个应用程序启动仅调用一次构造函数，请尝试

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中没有

navigationOptions: { header: null},

简单stack1: { screen: stack1 },

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

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

}

无法在我的标签页中获取参数

1 个答案: