changePhoneNumber

import React from 'react';
import {
  View,
  StyleSheet,
  TextInput
} from 'react-native';
import PropTypes from 'prop-types';
import {
  Cell,
  CommonButton,
  Toast
} from '../../../components';
import GlobalStyles from '../../../assets/globalStyles';
import { ColorCommon, GapCommon } from '../../../assets/publicConsts';

// 修改手机号
export default class ChangePhoneNumber extends React.Component {
  static propTypes = {
    navigation: PropTypes.object.isRequired,
    // dispatch: PropTypes.func.isRequired,
  };

  state = {
    disableButton: true, // 按钮禁用
    phoneValue: '', // 手机号
  }

  // 监听手机号
  handlePhoneInputChange = (phoneValue) => {
    if (phoneValue && phoneValue.length === 11) {
      this.setState({ disableButton: false });
    } else {
      this.setState({ disableButton: true });
    }
    this.setState({ phoneValue });
  }

  handleSubmit = async () => {
    const { navigation } = this.props;
    const { phoneValue } = this.state;
    if (!(/^1[3456789]\d{9}$/.test(phoneValue))) {
      Toast.show('请输入正确的手机号码！');
      return;
    }
    navigation.navigate('Home');
  }

  render() {
    const { disableButton } = this.state;
    return (
      <View style={[styles.container, GlobalStyles.container]}>
        <View style={{ marginTop: 2 * GapCommon.gapBase }}>
          <Cell label="手机号">
            <TextInput
              placeholder="请输入新手机号码"
              maxLength={11}
              keyboardType="numeric"
              style={{ fontSize: 16 }}
              onChangeText={this.handlePhoneInputChange}
            />
          </Cell>
        </View>
        <View style={styles.changePhoneButton}>
          <CommonButton
            text="确定"
            disable={disableButton}
            onPressButton={this.handleSubmit}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'space-between'
  },
  changePhoneButton: {
    paddingLeft: 4 * GapCommon.gapBase,
    paddingRight: 4 * GapCommon.gapBase,
    marginBottom: 4 * GapCommon.gapBase
  }
});