React Native学习之路(9) - 注册登录验证的实现

作者: woow_wu7 | 来源:发表于2017-07-24 14:50 被阅读471次

(1)TextInput文本输入框

TextInput属性

(1) keyboardType ：设置键盘类型（决定使用哪种键盘）

'email-address' ： 邮箱键盘
 'numeric'  ：数字键盘
 'phone-pad' ：

(2) secureTextEntry ：如果为true，文本框会遮住之前输入的文字，这样类似密码之类的敏感文字可以更加安全。默认值为false。( secure安全的意思 ) （ entry输入的意思）
(3) placeholder ：在文本输入之前提示用户文本框功能，也就是占位文字
(4) placeholderTextColor：占位字符串的文本颜色
(5) autoFocus：如果为true，在componentDidMount后会获得焦点。默认值为false。
(6) selectionColor ：设置输入框高亮时的颜色（在iOS上还包括光标）
(6) editable：如果值为假，文本是不可编辑，默认值为真7
(7) maxLength ：限制文本框中最多的字符数。使用这个属性而不用JS逻辑去实现，可以避免闪烁的现象。
(8) multiline：如果值为真，文本输入可以输入多行，默认值为假（ multiline：多线路的）
(9) onFocus ：当文本框（获得）焦点的时候调用此回调函数。
(10) onBlur ：当文本框（失去）焦点的时候调用此回调函数。
(11) onChange：当文本框内容变化时调用此回调函数
(12) onChangeText：当文本框内容变化时调用此回调函数。改变后的文字内容会作
为参数传递

 onChangeText={ (text) => {
                            this.setState({
                                phoneNumber: text   
                            })    //当文本框内容发生改变时，将文本框中输入的字符传给state
                        } }

(13) onEndEditing ：当文本输入结束后调用此回调函数。
(14) inlineImageLef ：指定一个图片放置在左侧。
(15) androidinlineImagePadding ：给放置在左侧的图片设置padding样式。
(16) autoCapitalize ：控制TextInput是否要自动将特定字符切换为大写：

 'characters': 所有的字符。
 'words': 每个单词的第一个字符。
 'sentences': 每句话的第一个字符（默认）。
' none': 不自动切换任何字符为大写。

(17) autoCorrect ：如果为false，会关闭拼写自动修正。默认值是true。
(18) underlineColorAndroid ：文本框的下划线颜色(译注：如果要去掉文本框的边框，请将此属性设为透明transparent)。
http://reactnative.cn/docs/0.46/textinput.html#content
http://www.jianshu.com/p/2f702b52b321

(2) Fetch中的post请求

(1) JSON.parse() ：

解析一个JSON字符串，可选地转换生成的值及其属性，并返回值。（属性:值）（ key:value ）

换一种说法是：JSON.parse() 方法解析一个JSON字符串，构造由字符串描述的JavaScript值或对象。可以提供可选的reviver函数以在返回之前对所得到的对象执行变换。

(2) JSON.stringify()

返回与指定值相对应的一个JSON字符串，可选地仅包含某些属性或以用户定义的方式替换属性值。

// 将字符串JSON格式化
JSON.parse(responseData)

// 将JSON数据转化为字符串
JSON.stringify(responseData)

 //更新数据源
    this.setState({
      dataSource:this.state.dataSource.cloneWithRows(JSON.parse(responseData).data)
    });

(3) Post请求

执行POST提交，我们可以将method属性值设置为post，并且在body属性值中设置需要提交的数据。

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})
-------------------------------------
译注：如果你的服务器无法识别上面POST的数据格式，那么可以尝试传统的form格式，示例如下：
fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: 'key1=value1&key2=value2'
})
-------------------------------------

POST请求实例：

 fetch("http://rapapi.org/mockjs/22101/api/u/signup",{
            method:'POST',
            headers:{
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body:JSON.stringify( 'phoneNumber': 'phoneNumber1' )
        }).then( (response) =>   response.json()   )
          .then( (data)=> {
            console.log(data.success)
            if(data && data.success){
                _this.showVerifyCode();
            }else{
                alert('发送验证码失败');
            }
        }).catch( (err) => {
            alert('获取验证码失败');
        })

http://www.cnblogs.com/keyi/p/6721710.html
http://www.jianshu.com/p/7c097051b5dc
http://www.51xuediannao.com/javascript/fetchdyf_fetchxydajaxqqfa__1142.html
http://blog.csdn.net/blueheart20/article/details/45174399
https://zhidao.baidu.com/question/7345375.html
iOS9对https的调整,需要在项目的info.plist添加Key：NSAllowsArbitraryLoads,具体方法看http://www.cnblogs.com/shaoting/p/5148323.html

（这里有个巨坑）http://blog.csdn.net/haoranli/article/details/60960858

   {
              this.state.codeSent
               ? <TouchableNativeFeedback  onPress={ this._submit }>
                      <Text style={ styles.btn}>登陆</Text>
                      </TouchableNativeFeedback>
                :
                  <TouchableNativeFeedback    onPress= { this._sendVerifyCode.bind(this) }>
                        <Text style={ styles.btn}>获取验证码</Text>
                         </TouchableNativeFeedback>
   }
如果不用bind(this)会出现报错

·

(4)验证码倒计时 setInterval() 和 clearInterval()

    
    coutDown() {
        this.setState({
            MainTime:60,
            MainTimeTitle: ''
        });
        this.bb = setInterval( () => {
            var aa = this.state.MainTime - 1;
            if( aa ===0){
                clearInterval( this.bb );
                this.setState({
                    MainTime:'',
                    MainTimeTitle: '重新获取'
                })}else{
                    this.setState({
                        MainTime: aa,
                        MainTimeTitle: ''
                    })
                }
        },1000)
    }
-------------------------------------
 <Text
         onPress={ this.coutDown.bind(this) }
          style={ styles.time}
 >{this.state.MainTime}{this.state.MainTimeTitle}
 </Text>

http://www.jianshu.com/p/819259d09609

(踩坑) ：这样写的话会有个警告（如下，如图）：

countDown()中的bb方法一直在执行

（解决方法）如下：

Waring: Can only update a mounted or mounting component. 

分析：可以看到在 countdown方法中每秒中调用一次bb方法去递减秒数，
当组件unmounted之后这个timer并没有停止，所以出现了上面的问题。

--------------------------------------------------------
解决方法：
将每次setInterval返回的ID保存起来，在componentWillUnmount方法中clearInterval
--------------------------------------------------------

完整代码：
    //组件将被卸载
    componentWillUnmount() {
        clearInterval(this.state.timeId)
    }
    //倒计时
    coutDown() {
        this.setState({
            MainTime:60,
            MainTimeTitle: ''
        });
        this.bb = setInterval( () => {
            var aa = this.state.MainTime - 1;
            if( aa ===56 ){
                clearInterval( this.bb );
                this.setState({
                    MainTime:'',
                    MainTimeTitle: '重新获取'
                })}else{
                    this.setState({
                        MainTime: aa,
                        MainTimeTitle: ''
                    })
                }
        },1000)
        this.setState({
            timeId: this.bb
        });
    }

http://blog.csdn.net/tujiaw/article/details/58238975

(5) 提交手机号和验证码

(1) 登陆按钮触发事件：

       {
                        this.state.codeSent
                        ? <TouchableNativeFeedback  onPress={ this._submit.bind(this) }>
                            <Text style={ styles.btn}>登陆</Text>
                            </TouchableNativeFeedback>
                        :
                         <TouchableNativeFeedback    onPress= { this._sendVerifyCode.bind(this) }>
                                <Text style={ styles.btn}>获取验证码</Text>
                          </TouchableNativeFeedback>
       }

(2) 登陆函数

_submit(){
        var that =  this;
        var loginPhoneNumber = this.state.phoneNumber;
        var loginVerifyCode = this.state.verifyCode;
        // console.log(loginPhoneNumber);
        // console.log(loginVerifyCode);
        if(!loginPhoneNumber || !loginVerifyCode ){
            return alert( 手机号或者验证码错误 );
        }else{
            fetch("http://rapapi.org/mockjs/22101/api/u/verify",{
                method:'POST',
                header: {
                    'Accept':'application/json',
                    'Content-Type':'application/json'
                },
                body: JSON.stringify({
                    'phoneNumber':'loginPhoneNumber',
                    'verifyCode': 'loginVerifyCode'
                })
            }).then( (response) => response.json() )
              .then((data) => {
                if(data && data.success){
                    // console.log(data)
                    // console.log(data.success)
                    // console.log( MOCK.mock(data) )
                    var data = MOCK.mock(data).data;
                    var stringify = JSON.stringify(data);
                    console.log(stringify);
                    // console.log(data.success)    //值是true
                    // that.props.afterLogin(stringify);
                    // console.log(data)
                    that.props.afterLogin(stringify);

                }else{
                    alert('发送验证码失败22222222222');
                }
              })
              .catch( (err) => {
                  alert('获取验证码失败333333333333');
              })
        }
    }

(3) 子组件传值给父组件

  _afterLogin(user) {
        var that = this;
        // user = JSON.stringify(user);
        AsyncStorage.setItem('user',user)
            .then( ()=> {
                console.log( AsyncStorage.getItem(user) )
                that.setState({
                    logined: false,
                    user: user
                })
                console.log(that.state.logined)
            })
        // this.setState(user)
    }


    render(){
        console.log( this.state.logined );   //true

        if(this.state.logined) {
            return <Login afterLogin={ this._afterLogin.bind(this) }/>;
        };
        return(
        <Go></Go>
        )
    }

这里可以理解为，父组件传递一个方法给子组件，子组件将（值）作为参数返回给父组件，父组件回调
http://blog.csdn.net/hehe0705/article/details/65631768

效果图：

20170724142429.gif

(6) AsyncStorage异步存储

AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统，它对于App来说是全局性的。它用来代替LocalStorage。

AsyncStorage.getItem() ：存值

QQ截图20170724144623.png

网友评论

giants_one:react native 短信服务用的是什么那个平台的呢
woow_wu7:@giants_one 不清楚哦，问了大神，说都是后端在做，和前端没有关系。阿里云？
giants_one:@省局到我的意思是有react native集成的短信平台啊，像大厂都是只提供ios android原生集成
woow_wu7:@giants_one 太多了，以前做运营的时候，每天都有人发短信的刊例，具体看公司业务，号称0.6秒的要不要？哈哈

本文标题：React Native学习之路(9) - 注册登录验证的实现

本文链接：https://www.haomeiwen.com/subject/uxsekxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

React Native学习之路(9) - 注册登录验证的实现

(1)TextInput文本输入框

TextInput属性

(2) Fetch中的post请求

(1) JSON.parse() ：

(2) JSON.stringify()

(3) Post请求

(4)验证码倒计时 setInterval() 和 clearInterval()

(5) 提交手机号和验证码

(6) AsyncStorage异步存储

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

react-native开发

React-Native 开发阵营

RN

React Native实践