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