Comments (10)
@ldzdz hello,可以给一份能单独运行的示例代码吗?方便我这边快速复现bug。
from react-native-supervons-custom-keyboard.
最好可以带上react-native-supervons-custom-keyboard的版本号
from react-native-supervons-custom-keyboard.
用的是1.4.1的版本,还有个问题,就是键盘弹出来的时候,在字母键盘输入wertsdf,按了后会置灰,不会变回原来的白色,然后切换数字键盘,数字键盘230直接是灰色。
from react-native-supervons-custom-keyboard.
from react-native-supervons-custom-keyboard.
from react-native-supervons-custom-keyboard.
@ldzdz Hi,现象我看见啦,可以把你的设备类型,和使用的代码贴出来吗?这样我就可以运行复现效果了,尽量使用这个包裹,看起来很明显:
from react-native-supervons-custom-keyboard.
`
"use strict";
import React from 'react';
import {
Image,
View,
Text,
TextInput,
StyleSheet,
TouchableOpacity,
PixelRatio,
Dimensions,
Platform,
ScrollView,
AsyncStorage, ActivityIndicator
} from 'react-native';
import md5 from 'md5';
import Button from '../../components/WelButton';
import Validator from '../../common/Validator';
import alert from '../../common/Alerts';
import Captcha from '../../module/Captcha';
import PropTypes from 'prop-types';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import RNSecureKeyStore, {ACCESSIBLE} from "react-native-secure-key-store";
import {encode64}from '../../common/Base64'
import TouchID from 'react-native-touch-id'
import * as ScreenUtil from "../../common/ScreenUtil";
import Toasts from "../../common/Toasts";
import {SecurityKeyboardInput} from "react-native-supervons-custom-keyboard";
const {height, width} = Dimensions.get('window');
const HEADER_HEIGHT = Platform.OS === 'ios' ? 64 : 76;
const containerHeight = height - HEADER_HEIGHT;
const TAB_SELECT_LEFT = 0;
const TAB_SELECT_RIGHT = 1;
const TAB_SELECT_MIDDLE = 2;
// iPhoneX
const X_WIDTH = 375;
const X_HEIGHT = 812;
//iphoneXS
const XS_WIDTH = 414;
const XS_HEIGHT = 896;
class LoginView_V2Android extends React.Component {
static propTypes = {
onForgetPasswordClick: PropTypes.func,
onRegisterClick: PropTypes.func.isRequired,
doFingerLogin:PropTypes.func.isRequired,
doLogin: PropTypes.func.isRequired,
doLoginCode: PropTypes.func.isRequired,
doLoginSbk: PropTypes.func.isRequired,
//doRemember: PropTypes.func.isRequired,
doSendCode: PropTypes.func.isRequired,
doWechatLogin: PropTypes.func.isRequired,
remember: PropTypes.bool,
loginFlag: PropTypes.bool,
phone: PropTypes.string,
password: PropTypes.string,
ca006: PropTypes.string,
sbkpassword: PropTypes.string,
//doRemembersbk: PropTypes.func.isRequired,
remembersbk: PropTypes.bool,
doUnitLogin: PropTypes.func.isRequired,
doOrgLogin: PropTypes.func.isRequired,
doCjOrgLogin: PropTypes.func.isRequired,
userName: PropTypes.string,
userPassword: PropTypes.string,
orgUserName: PropTypes.string,
orgUserPassword: PropTypes.string,
jmOrgName:PropTypes.string,
jmOrgPass:PropTypes.string,
//doRememberUnit: PropTypes.func.isRequired,
rememberUnit: PropTypes.bool,
//doRememberOrg: PropTypes.func.isRequired,
rememberOrg: PropTypes.bool,
};
static defaultProps = {
remember: true,
phone: '',
password: '',
ca006: '',
// captcha: '',
sbkpassword: '',
//code:'',
remembersbk: true,
userName: '',
userPassword: '',
orgUserName: '',
orgUserPassword: '',
jmOrgName:'',
jmOrgPass:'',
rememberUnit:true,
rememberOrg:true,
loginFlag:false,
wechatLoading:false,
};
constructor(props, context, update) {
super(props, context, update);
let leftTriangle = true;
let rightTriangle = false;
if (this.props.tab === TAB_SELECT_MIDDLE) {
leftTriangle = false;
rightTriangle = false;
}
if (this.props.loginFlag) {
if (this.props.tab === TAB_SELECT_RIGHT) {
leftTriangle = false;
rightTriangle = true;
}
}
this.state = {
phoneFocus: false,
numberFocus: false,
captchaFocus: false,
//初始默认被选中
userleftFocus: leftTriangle,
userightFocus: rightTriangle,
loginType: this.props.loginType,
phone: this.props.phone,
password: this.props.password,
remember: this.props.remember,
ca006: this.props.ca006,
sbkpassword: this.props.sbkpassword,
remembersbk: this.props.remembersbk,
userName: this.props.userName,
userPassword: this.props.userPassword,
orgUserName: this.props.orgUserName,
orgUserPassword: this.props.orgUserPassword,
jmOrgName: this.props.jmOrgName,
jmOrgPass: this.props.jmOrgPass,
rememberUnit: this.props.rememberUnit,
rememberOrg: this.props.rememberOrg,
isunit: false,
loginFlag: this.props.loginFlag,
// tab: TAB_SELECT_LEFT,
tab: this.props.tab ? this.props.tab : TAB_SELECT_LEFT,
isSupported: true,//支持指纹登录
fingerText: '指纹',
wechatLoading: false,
};
this.stopSnapTimer = this.stopSnapTimer.bind(this);
}
componentWillUnMount() {
this.stopSnapTimer();
}
stopSnapTimer() {
this.refs.snapBtn && this.refs.snapBtn.stop();
}
render() {
let tabLeftStyle = this.state.tab === TAB_SELECT_LEFT ? styles.tabSelected : null;
let tabRightStyle = this.state.tab === TAB_SELECT_RIGHT ? styles.tabSelected : null;
let tabTextLeftStyle = this.state.tab === TAB_SELECT_LEFT ? styles.tabTextSelected : null;
let tabTextRightStyle = this.state.tab === TAB_SELECT_RIGHT ? styles.tabTextSelected : null;
return (
<ScrollView>
<KeyboardAwareScrollView>
<View style={ [styles.containerIphoneX]} >
<View style={[styles.header, ] }>
<Image style={styles.headerLogo} source={require('../../imgs/loginHead.png')}
resizeMode='stretch'></Image>
</View>
<View style={styles.content}>
<View style={styles.contentTop}>
<View style={[styles.contentField, styles.contentTab]}>
<TouchableOpacity style={[styles.tab, styles.tabLeft, tabLeftStyle]}
onPress={_=>this.setState({
tab: TAB_SELECT_LEFT,
userleftFocus:true,
userightFocus:false
})}>
<Text style={[styles.tabText, tabTextLeftStyle]}>城镇职工机构</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.tab, styles.tabRight, tabRightStyle]}
onPress={_=> {
this.setState({
tab: TAB_SELECT_RIGHT,
userleftFocus:false,
userightFocus:true,
});
}}>
<Text style={[styles.tabText, tabTextRightStyle]}>城乡居民机构</Text>
</TouchableOpacity>
</View>
{
this.state.userleftFocus?
<Image resizeMode='stretch'
source={require('./../../imgs/user_sanjiao.png')}
style={styles.leftSanjiao}/>:null
}
{
this.state.userightFocus?
<Image resizeMode='stretch'
source={require('./../../imgs/user_sanjiao.png')}
style={styles.rightSanjiao}/>:null
}
{
this.renderLogin()
}
</View>
</View>
</View>
</KeyboardAwareScrollView>
</ScrollView>
);
}
renderLogin() {
if(this.state.tab === TAB_SELECT_LEFT) {
return (
<View>
<View
style={[styles.contentFields, styles.contentInput, this.state.phoneFocus ? styles.borderBottomColor : null]}>
<Image resizeMode='stretch'
source={this.state.phoneFocus ? require('./../../imgs/ic_login_number_over.png') : require('./../../imgs/ic_login_number.png')}
style={styles.inputImg}/>
<TextInput style={[styles.flex, styles.textInput]}
maxLength={18}
autoCapitalize="characters"
placeholder="请输入用户名"
underlineColorAndroid='transparent'
placeholderTextColor={this.state.phoneFocus ? '#183884' : "#cbcbcb"}
clearButtonMode="always"
onFocus={() => this.setState({phoneFocus: true,numberFocus: false,captchaFocus:false})}
onBlur={() => this.setState({phoneFocus: false})}
onChangeText={(text) => this.setState(
{orgUserName: text}
)}
value={this.state.orgUserName}
/>
</View>
<View
style={[styles.contentFields, styles.contentInput, this.state.numberFocus ? styles.borderBottomColor : null]}>
<Image resizeMode='stretch'
source={this.state.isInput ? require('./../../imgs/ic_login_lock_over.png') : require('./../../imgs/ic_login_lock.png')}
style={styles.inputImg}/>
<SecurityKeyboardInput
keyName={'orgUserPassword'}
ref="passwordIn"
style={{width:width*0.6,
justifyContent: 'center',
fontSize: 16,}}
secureTextEntry={true}
random={false}
cursorStyle={{color: 'red'}}
valueStyle={{ fontSize: 16,marginLeft:10 }}
secureTextStyle={{ fontSize: 10 ,color:'#183884'}}
keyboardType={'string'}
placeholder={'请输入密码'}
placeholderTextColor={this.state.isInput ? '#183884' : "#cbcbcb"}
value={this.state.orgUserPassword}
onChangeText={orgUserPassword=>this.setState({orgUserPassword})}
onFocus={_=>this.setState({isInput: true})}
onBlur={_=>this.setState({isInput: false})}
/>
</View>
<Button ref="loginBtn" text='登录' onClick={()=>this.onLoginClick()}/>
</View>
)
}
else if (this.state.tab === TAB_SELECT_RIGHT){
return (
<View>
<View
style={[styles.contentFields, styles.contentInput, this.state.phoneFocus ? styles.borderBottomColor : null]}>
<Image resizeMode='stretch'
source={this.state.phoneFocus ? require('./../../imgs/ic_login_number_over.png') : require('./../../imgs/ic_login_number.png')}
style={styles.inputImg}/>
<TextInput style={[styles.flex, styles.textInput]}
maxLength={18}
autoCapitalize="characters"
placeholder="请输入用户名"
underlineColorAndroid='transparent'
placeholderTextColor={this.state.phoneFocus ? '#183884' : "#cbcbcb"}
clearButtonMode="always"
onFocus={() => this.setState({phoneFocus: true,numberFocus: false,captchaFocus:false})}
onBlur={() => this.setState({phoneFocus: false})}
onChangeText={(text) => this.setState(
{jmOrgName: text}
)}
value={this.state.jmOrgName}
/>
</View>
<View
style={[styles.contentFields, styles.contentInput, this.state.numberFocus ? styles.borderBottomColor : null]}>
<Image resizeMode='stretch'
source={this.state.numberFocus ? require('./../../imgs/ic_login_lock_over.png') : require('./../../imgs/ic_login_lock.png')}
style={styles.inputImg}/>
<SecurityKeyboardInput
keyName={'orgUserPassword'}
ref="passwordIn"
style={{width:width*0.6,
justifyContent: 'center',
fontSize: 16,}}
secureTextEntry={true}
random={false}
cursorStyle={{color: 'red'}}
valueStyle={{ fontSize: 16,marginLeft:10 }}
secureTextStyle={{ fontSize: 10 ,color:'#183884'}}
keyboardType={'string'}
placeholder={'请输入密码'}
placeholderTextColor={this.state.numberFocus ? '#183884' : "#cbcbcb"}
value={this.state.jmOrgPass}
onChangeText={jmOrgPass=>this.setState({jmOrgPass})}
onFocus={_=>this.setState({numberFocus: true})}
onBlur={_=>this.setState({numberFocus: false})}
/>
</View>
<Button ref="loginBtn" text='登录' onClick={()=>this.onLoginClick()}/>
</View>
)
}
}
}
const styles = StyleSheet.create({
resultWraper: {
justifyContent: 'center',
alignItems: 'center',
marginTop:-10
},
resultText: {
fontSize: 13,
// color: "red",
},
flex: {
flex: 1
},
container: {
borderColor: '#999999',
flexDirection: "column",
justifyContent: 'space-between',
height: height+84,
backgroundColor: '#fff',
marginTop:-64,
// marginBottom: -34,
// paddingTop: -44,
paddingBottom: -30,
},
containerIphoneX: {
borderColor: '#999999',
flexDirection: "column",
justifyContent: 'space-between',
height: ((Platform.OS === 'ios' &&
((height === X_HEIGHT && width === X_WIDTH) ||
(height === X_WIDTH && width === X_HEIGHT)) ) )? height+64 : (Platform.OS === 'ios' &&
((height === XS_HEIGHT && width === XS_WIDTH) ||
(height === XS_WIDTH && width === XS_HEIGHT)) ? height+80 : height) ,
backgroundColor: '#fff',
marginTop:((Platform.OS === 'ios' &&
((height === X_HEIGHT && width === X_WIDTH) ||
(height === X_WIDTH && width === X_HEIGHT)) ) )? -40 : (Platform.OS === 'ios' &&
((height === XS_HEIGHT && width === XS_WIDTH) ||
(height === XS_WIDTH && width === XS_HEIGHT)) ? -50 : -10) ,
paddingBottom: Platform.OS === 'ios' ? -30 : 0,
},
bqText: {
alignItems:'flex-end',
marginBottom: ((Platform.OS === 'ios' &&
((height === X_HEIGHT && width === X_WIDTH) ||
(height === X_WIDTH && width === X_HEIGHT)) || (height === XS_WIDTH && width === XS_HEIGHT) || (height === XS_HEIGHT && width === XS_WIDTH) )) ? 50 : 15 ,
textAlign:'center',
fontSize:15
},
header: {
flex: 4,
flexDirection: "column-reverse",
alignItems: 'center',
},
headerLogo: {
width: width,
flex:1,
// height: width/2.28,
},
content: {
flex: 12,
flexDirection: "column",
},
contentTop: {
flexDirection: "column",
},
contentField: {
height: 54,
// marginHorizontal: 17,
},
contentFields: {
height: 54,
marginHorizontal: 30,
},
contentTab: {
flexDirection: "row",
justifyContent: 'flex-end',
alignItems: 'flex-end',
},
tab: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'flex-end',
padding: 16,
// borderWidth: 1 / PixelRatio.get(),
backgroundColor: '#ebedf9',
// borderColor: '#999'
},
tabLeft: {
// borderTopLeftRadius: 5,
// borderBottomLeftRadius: 5,
borderRightWidth: 0,
},
tabMiddle: {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
borderRightWidth: 0.5,
},
tabRight: {
// borderTopRightRadius: 5,
// borderBottomRightRadius: 5,
borderLeftWidth: 0,
},
tabSelected: {
backgroundColor: '#ebedf9',
},
tabTextSelected: {
color: '#183884'
},
tabText: {
fontSize: 16,
},
contentInput: {
flexDirection: "row",
borderBottomWidth: 1 / PixelRatio.get(),
borderBottomColor: '#999999',
justifyContent: 'space-between',
alignItems: 'center',
},
borderBottomColor: {
borderBottomColor: '#183884',
},
leftSanjiao:{
marginTop:-10,
marginLeft: width/4-12,
height: 20,
width: 25,
},
rightSanjiao:{
marginTop:-10,
marginLeft:width*3/4-12,
height: 20,
width: 25,
},
inputImg: {
marginRight: 11,
marginLeft: 19,
height: 20,
width: 15,
},
otherImage:{
marginTop:5,
marginRight: 11,
marginLeft: 25,
height: 22,
width: 20,
},
textInput: {
fontSize: 16,
color: '#333',
paddingTop: 5
},
attach: {
flexDirection: "row",
alignItems: 'center',
marginHorizontal: 17,
marginTop: 10,
marginBottom:2
},
checkWrapper: {
height: 14,
},
login: {
flex: 1,
backgroundColor: '#11b6f4',
borderRadius: 2,
marginVertical: 10,
justifyContent: 'center',
alignItems: 'center'
},
loginText: {
fontSize: 16,
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
color: '#fff',
},
register: {
alignItems: 'center',
backgroundColor: "#fff",
borderRadius: 51/2,
borderWidth: 1 / PixelRatio.get(),
borderColor: '#183884',
flexDirection: 'row',
height: 51,
justifyContent: 'center',
marginLeft: 17,
marginRight: 17,
marginBottom: 20,
position: 'relative',
},
registerText: {
alignSelf: 'center',
color: '#183884',
fontSize: 16,
}
});
export default LoginView_V2Android;
`
from react-native-supervons-custom-keyboard.
发现了,当输入超过输入框的宽度后,还在继续输入,所以导致光标超出屏幕了,这个问题在1.4.2已经解决。
npm install [email protected]
然后关掉node框,重新运行试试。
from react-native-supervons-custom-keyboard.
即使没超过宽度,在屏幕内,也还是没有,并不是挤出屏幕外面了,我们用1.4.2试下
from react-native-supervons-custom-keyboard.
光标确实可以出现了。
from react-native-supervons-custom-keyboard.
Related Issues (6)
- UIManager.measure(this.refs.keyboardWrap HOT 2
- 全键盘第三排中间的 三个字母点不中 HOT 1
- 不能再一个页面多次引入 HOT 1
- 同一个页面引入多个,会高频复现报错。 HOT 5
- 没有@符号 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-supervons-custom-keyboard.