所有APP都有表单提交,键盘是千万不能遮挡的,而且在最后一项输入的时候,底部的 【提交/登录】按钮需要弹上来显示
安装插件:
npm i react-native-keyboard-aware-scroll-view --save
yarn add react-native-keyboard-aware-scroll-view
然后,用如下包裹你的 input 输入组件
<KeyboardAwareScrollView
style={styles.keyBoardStyle}
extraHeight={120}
enableOnAndroid={true}
enableResetScrollToCoords={true}>
<View style={styles.formContainer}>
<View style={styles.loginForm}>
<View style={styles.formItem}>
<View style={styles.formItemL}>
<Image style={[styles.frmIcoStyle,styles.accountImg]} source={require('./../image/account.png')} />
</View>
<View style={styles.formItemR}>
<TextInput
ref="account"
autoFocus={true}
underlineColorAndroid="transparent"
onChangeText={(account) => this.setState({account})}
value={this.state.account}
placeholder={'用户名/账号/手机号'}
placeholderTextColor="#C5C5C5"
style={styles.textInputStyle}
clearButtonMode="always"
returnKeyType="done"
/>
</View>
</View>
<View style={styles.formItem}>
<View style={styles.formItemL}>
<Image style={[styles.frmIcoStyle,styles.pwdImg]} source={require('./../image/pwd.png')} />
</View>
<View style={styles.formItemR}>
<TextInput
ref="pwd"
underlineColorAndroid="transparent"
onChangeText={(pwd) => this.setState({pwd})}
value={this.state.pwd}
placeholder={'请输入您的密码'}
placeholderTextColor="#C5C5C5"
secureTextEntry={true}
style={styles.textInputStyle}
returnKeyType="done"
/>
</View>
</View>
<TouchableOpacity onPress={this.handleLogin}>
<View style={styles.frmSubmit}>
<Text style={styles.frmSubmitText}>登录</Text>
</View>
</TouchableOpacity>
<View style={styles.frmGroup}>
<Text style={styles.frmGroupText}>注册账号</Text>
<Text style={styles.frmGroupText}>忘记密码</Text>
</View>
</View>
</View>
</KeyboardAwareScrollView>
开启 enableOnAndroid 后 extraHeight 才生效。
extraHeight 也就是键盘弹出后,距离包裹组件的 margin height。最终效果如下: