React Native登录注册页面实现空白处收起键盘

其实很简单，直接使用ScrollView作为父视图即可。有木有很神奇啊，以前都还不知道呢。。。。。😄

效果截图如下：

看代码：

   render() {
        return (
            <ScrollView>
               <View style={[styles.itemViewStyle,{marginLeft: 10}]}>
                    <Image source={require('./../../Images/icon_phone.png')}
                           style={styles.tipImageStyle}>
                    </Image>
                   <TextInput
                        style={styles.TextInputStyle}
                        onChangeText={(text) => this.setState({telephone: text})}
                        value={this.state.telephone}
                        // 这两个属性只有android能用
                        inlineImageLeft={require('./../../Images/ic_template_default.png')}
                        inlineImagePadding={10}
                        placeholder='手机号'>
                    </TextInput>
               </View>
               <View style={[styles.itemViewStyle,{marginLeft: 10, marginTop: 10}]}>
                    <Image source={require('./../../Images/icon_password.png')}
                    style={styles.tipImageStyle}>
                    </Image>
                    <TextInput
                        style={styles.TextInputStyle}
                        // onChangeText={(text) => this.setState({telephone: text})}
                        // value={this.state.telephone}
                        inlineImageLeft={require('./../../Images/ic_template_default.png')}
                        placeholder='验证码'>
                        {/*<TouchableOpacity
                            activeOpacity={0.75}
                            style={styles.fetchVerifyCodeStyle}
                            onPress={this.fetchVerifyCodeAction.bind(this)}>
                            <Text style={{fontSize: 16, color: 'white'}}>获取验证码</Text>
                        </TouchableOpacity>*/}
                    </TextInput>
                    <LCCountDownButton frameStyle={styles.countDownStyle}
                    beginText='获取验证码'
                    endText='再次获取验证码'
                    count={60}
                    pressAction={()=>{this.countDownButton.startCountDown()}}
                    changeWithCount={(count)=> count + 's后重新获取'}
                    id='register'   
                    ref={(e)=>{this.countDownButton=e}}
                    />
               </View>
               <View style={{marginTop: 20}}>
                 <Text style={{textAlign: 'center', fontSize: 13, color: 'gray'}}>仅支持中国大陆手机号注册,港,澳,台及海外用户请使用邮箱</Text>
               </View>
                <TouchableOpacity
                    activeOpacity={0.75}
                    style={styles.registerBtnStyle}
                    onPress={this.nextAction.bind(this)}>
                    <Text style={{fontSize: 16, color: 'white'}}>下一步</Text>
                 </TouchableOpacity>
            </ScrollView>
        );
    }

 

项目Github地址：

https://github.com/PengSiSi/React-Native-PSShiWuKu.git