Использование контейнера в createDrawerNavigator реагирует на нативный - PullRequest
Новая
       26

Использование контейнера в createDrawerNavigator реагирует на нативный

0 голосов
/ 31 января 2020

Я хочу использовать контейнер в createDrawerNavigator, как <Scene component={LoginContainer} layout={Login} />

Поскольку мне нужен этот onFormSubmit, загрузка реквизитов из LoginContainer в мой компонент Login, но я не хочу изменять эту структуру маршрута. Я пытаюсь изменить дизайн меню в mcnamee / response-native-starter-kit на galio hamburger menu

маршрутов. js

const GalioDrawer = props => (
  <SafeAreaView style={styles.drawer} forceInset={{ top: 'always', horizontal: 'never' }}>
    // code pieces
  </SafeAreaView>
);

const styles = StyleSheet.create({
//styles  
});
MenuIcon.propTypes = {
  name: PropTypes.string,
  family: PropTypes.string,
  focused: PropTypes.bool,
};

const screens = {

  Login: {
    screen: Login,
    navigationOptions: {
      drawerLabel: 'Login Screen',
      drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
    },
  },

};

const options = {
  contentComponent: props => <GalioDrawer {...props} />,
  contentOptions: {
    // options
  },
};

const GalioApp = createDrawerNavigator(screens, options);

LoginContainer 

    class Login extends Component {
  static propTypes = {
    Layout: PropTypes.func.isRequired,
    member: PropTypes.shape({}).isRequired,
    onFormSubmit: PropTypes.func.isRequired,
  }

  state = {
    error: null,
    success: null,
    loading: false,
  }

  onFormSubmit = (data) => {
    const { onFormSubmit } = this.props;

    this.setState({ loading: true });

    return onFormSubmit(data)
      .then(() => this.setState({
        loading: false,
        success: 'Success - Logged in',
        error: null,
      })).catch((err) => {
        this.setState({
          loading: false,
          success: null,
          error: err,
        });
        throw err; // To prevent transition back
      });
  }

  render = () => {
    const { member, Layout } = this.props;
    const { error, loading, success } = this.state;

    return (
      <Layout
        error={error}
        member={member}
        loading={loading}
        success={success}
        onFormSubmit={this.onFormSubmit}
      />
    );
  }
}

const mapStateToProps = state => ({
  member: state.member || {},
});

const mapDispatchToProps = dispatch => ({
  onFormSubmit: dispatch.member.login,
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);

Вход 

    class Login extends React.Component {
    static propTypes = {
      member: PropTypes.shape({
        email: PropTypes.string,
      }),
      error: PropTypes.string,
      success: PropTypes.string,
      loading: PropTypes.bool.isRequired,
      onFormSubmit: PropTypes.func.isRequired,
    }

      static defaultProps = {
        error: null,
        success: null,
        member: {},
      }

      constructor(props) {
        super(props);
        this.state = {
          email: (props.member && props.member.email) ? props.member.email : '',
          password: '',
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

      handleChange = (name, val) => this.setState({ [name]: val })

      handleSubmit = () => {
        const { onFormSubmit } = this.props;

        return onFormSubmit(this.state)
          .then((e) => {
            console.log('Success: ' + e);
            setTimeout(() => Actions.pop(), 1000);
          })
          .catch((e) => {
            console.log('Error: ' + e);
          });
      }
render(){ //codes };
...