Giter Site home page Giter Site logo

Comments (5)

ldzdz avatar ldzdz commented on June 17, 2024

版本1.4.1

from react-native-supervons-custom-keyboard.

supervons avatar supervons commented on June 17, 2024

@ldzdz Hi，很开心你能发现bug，若是能把可以运行的代码发出来，那我将会很快复现并解决它。比如，你可以使用
image
渲染出来将像这样，这样可以大大减少沟通成本：

import React, { useState } from "react";
import { View, Text } from "react-native";
import { SecurityKeyboardInput } from "react-native-supervons-custom-keyboard";

export default function Login(props) {
  const [passWord, setPassWord] = useState("");
  const [passWord1, setPassWord1] = useState("");

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <SecurityKeyboardInput
        keyName={"password"}
        keyboardHeader={() => {
          return <Text>欢迎加入！一起ExploreRN！</Text>;
        }}
        style={{
          width: 300,
          backgroundColor: "#DCDCDC",
          borderRadius: 15,
        }}
        secureTextEntry={true}
        valueStyle={{ fontSize: 18, left: 1, marginLeft: 10 }}
        secureTextStyle={{ left: 12, fontSize: 10 }}
        cursorStyle={{ left: 8 }}
        keyboardType={"string"}
        placeholder={"密码"}
        placeholderTextColor={"#B1B1B2"}
        onChangeText={text => setPassWord1(text)}
      />
      <SecurityKeyboardInput
        keyName={"password1"}
        keyboardHeader={() => {
          return <Text>欢迎加入！一起ExploreRN！</Text>;
        }}
        style={{
          width: 300,
          backgroundColor: "#DCDCDC",
          borderRadius: 15,
        }}
        secureTextEntry={true}
        valueStyle={{ fontSize: 18, left: 1, marginLeft: 10 }}
        secureTextStyle={{ left: 12, fontSize: 10 }}
        cursorStyle={{ left: 8 }}
        keyboardType={"string"}
        placeholder={"密码"}
        placeholderTextColor={"#B1B1B2"}
        onChangeText={text => setPassWord(text)}
      />
    </View>
  );
}

from react-native-supervons-custom-keyboard.

ldzdz avatar ldzdz commented on June 17, 2024

`
"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.

supervons avatar supervons commented on June 17, 2024

@ldzdz oh ,sorry.无法运行你的示例代码，貌似有一些依赖文件，建议清除除了ReactNative自带的依赖。

from react-native-supervons-custom-keyboard.

supervons avatar supervons commented on June 17, 2024

No reply, default off, reply to me and then open.

from react-native-supervons-custom-keyboard.

Related Issues (6)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.