其實很簡單，直接使用ScrollView作為父視圖即可。有木有很神奇啊，以前都還不知道呢。。。。。?

效果截圖如下：

看代碼：

render() {return (<ScrollView><View style={[styles.itemViewStyle,{marginLeft: 10}]}><Image source={require('./../../Images/icon_phone.png')}style={styles.tipImageStyle}></Image><TextInputstyle={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><TextInputstyle={styles.TextInputStyle}// onChangeText={(text) => this.setState({telephone: text})}// value={this.state.telephone}inlineImageLeft={require('./../../Images/ic_template_default.png')}placeholder='驗證碼'>{/*<TouchableOpacityactiveOpacity={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><TouchableOpacityactiveOpacity={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

轉載于:https://www.cnblogs.com/pengsi/p/7681961.html

總結

以上是生活随笔為你收集整理的React Native登录注册页面实现空白处收起键盘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。