React-Native中TextInput相关Demo

TextInput

• 基本使用

  import { TextInput, TouchableOpacity } from "react-native";
  
  <View>
    <TextInput
      placeholder="输入手机号码"
      placeholderTextColor="#918D87"
      maxLength={11}
      onSubmitEditing={this.phoneNumberSubmitEditing}
      onChangeText={this.phoneNumberChangeText}
      // 默认是英文键盘，phone-pad是数字键盘
      keyboardType="phone-pad"
      /**
       * borderLeftWidth borderTopWidth borderRightWidth borderBottomWidth
       * borderTopLeftRadius borderTopRightRadius borderBottomRightRadius borderBottomLeftRadius
       */
      style={{ fontSize: pxToDp(24) }}
      // 如果使密码输入框的话，需要这个，是安全输入
      secureTextEntry={true}
      onFocus={() => {
        this.setState({ phoneNumberErrShow: false });
      }}
      // 当失去焦点的时候，进行正则检查
      onBlur={() => {
        this.setState({ phoneNumberErrShow: true });
      }}
    />
    {/* 文字提示信息 */}
    {phoneNumberErrShow ? (
      <Text style={styles.errorText}>
        {utils.checkPhone(phoneNumber)}
      </Text>
    ) : (
      <View />
    )} 
  </View>
  

• 发送验证码和倒计时

  state = {
    disableButton: false,
  }
  
  <TouchableOpacity
    disabled = {this.state.disableButton}
  >
  
  </TouchableOpacity>
  
  </TextInput>
  //倒计时
  countDown = () => {
    let seconds = 60;
    //重新获取60s
    this.setState({ btnText: `重新获取(${seconds})` });
    this.setState({disableButton: true});
    let timeId = setInterval(() => {
      seconds--;
      this.setState({ btnText: `重新获取(${seconds})` });
      if (seconds === 0) {
        clearInterval(timeId);
        this.setState({ btnText: '重新获取', disableButton: false });
      }
    }, 1000);
  };
  
  //传入验证码接口类型
  //1-用户注册;2-密码修改;3-更换手机号;4-短信登录
  verifyCodeRequest = (verifyType) => {
    Http.getVerifyCode({
      code: verifyType,
      mobile: this.state.phoneNumber,
    }).then((res) => {
      console.log(res);
      if (res.data.code === 0) {
        Toast.success(res.data.msg, 1000, 'center');
        this.countDown();
      } else {
        Toast.fail(res.data.msg, 1000, 'center');
      }
    });
  };
  

• 子组件可以修改父组件state里的数据

  // 这里的this指向的是包含LoginInput的component
  <LoginInput
    phoneNumberGet={(value) => {
      this.setState({ phoneNumber: value });
    }}
    passwordGet={(value) => {
      this.setState({ password: value });
    }}
  />
  

• 点击登录之后需要进行的操作

  login = async () => {
    if (this.state.password !== '') {
      Toast.message('登录中...');
      let res = await Http.login({
        account: this.state.phoneNumber,
        password: this.state.password,
      });
      if (res.data.code !== 0) {
        Toast.fail(res.data.msg, 1000, 'center');
        return;
      }
      Toast.success(res.data.msg + '，不要着急哦，跳转中~~~', 1000, 'center');
      this.state.userId = res.data.data.userId;
      this.state.accessToken = res.data.data.accessToken;
      this.state.refreshToken = res.data.data.refreshToken;
  
      //获取个人信息
      RootStore.userStore.setToken(this.state.accessToken);
      let answer = await Http.getMyInfo();
      this.setState({
        name: answer.data.data.nickName,
        img: answer.data.data.userAvatar,
      });
  
      let LocalData = {
        accessToken: this.state.accessToken,
        refreshToken: this.state.refreshToken,
        userId: this.state.userId,
        name: this.state.name,
        img: this.state.img,
      };
      // 存储本地信息，token需另外存储，连接socket
      RootStore.userStore.infoSet(LocalData);
      LocalStorageUtils.set('accessToken', this.state.accessToken);
      RootStore.globalStore.allData.Socket = io(
        '',
        {
          query: `userid=${this.state.userId}`,
          // reconnect: false,
          'reconnection delay': 20000,
          transports: ['websocket'], // you need to explicitly tell it to use websockets
        },
      ).connect();
      RootStore.userStore.setToken(this.state.accessToken);
      RootStore.userStore.infoSet(LocalData);
      NavigationHelper.goBack();
    } else {
      Toast.fail('密码为空', 1000, 'center');
    }
  };