react-native,纯数字键盘组件；

示例代码：
/**
*

@auther:wujh
@数字键盘组件

import React, { Component } from 'react';
import { StyleSheet, Text, View, Modal, Dimensions } from 'react-native';
import { Grid, Icon } from '@ant-design/react-native';

componentDidMount() {
this.defaultHideDom();
}

configItemEl(_el, index) {
const { currentIndex } = this.state;
if (index <= 8) {
return ({index + 1});
}
if (index === 9) {
return ();
}
if (index === 10) {
return (0);
}
if (index === 11) {
return (DELETE);
}
}

defaultHideDom() {
this.setState({
hideBg: Array.from(new Array(6)).map((_val, i) => ({
text: ,
}))
})
}

onKeyClick(index, i) {
const getPasswordstr = this.props.getPasswordstr;
const getPasswordArr = this.props.getPasswordArr;
if (index !== 12 && index !== 10 && this.state.keyData.length < 6) {
this.setState({
keyData: [...this.state.keyData, index === 11 ? 0 : index],
hideBg: this.state.hideBg.map((item, indexKey) => {
if (indexKey === i - 1) {
item.text = (

)
}
return item
})
}, () => {
if (i === 6) {
getPasswordstr(this.state.keyData.join(''));
}
getPasswordArr(this.state.keyData);
});
}
if (index === 12 && this.state.keyData.length >= 0) {
const arr = this.state.keyData.filter((item, indexKey) => i !== indexKey)
this.setState({
keyData: arr,
hideBg: this.state.hideBg.map((item, indexKey) => {
if (indexKey === i) {
item.text = ()
}
return item
})
}, () => {
getPasswordstr(this.state.keyData.join(''));
getPasswordArr(this.state.keyData);
})
}
}

render() {
const visible = this.props.keyboardVisible;
const type = this.props.type;
const title = this.props.title;
const toClose = this.props.toClose;
const forgot = this.props.forgot;
const { hideBg } = this.state;
return (
visible={visible}
animationType="slide"
transparent={true}
onRequestClose={() => {
i = 0;
this.defaultHideDom();
this.setState({ keyData: [] });
return toClose();
}}

{
i = 0;
this.defaultHideDom();
this.setState({ keyData: [] });
toClose()
}} style={styles.iconContainer}>
{title}
{ forgot() }}>忘記密碼

{type === 'deal' && (data={hideBg}
columnNum={6}
hasLine={false}
itemStyle={{
justifyContent: 'center',
alignItems: 'center',
flex: 1,
height: 80,
backgroundColor: '#FFF',
}}
renderItem={(_el, index) => _el.text}
/>)}
data={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}
columnNum={3}
onPress={(_el, index) => {
this.setState({ currentIndex: index }, () => {
setTimeout(() => { this.setState({ currentIndex: undefined }) }, 10)
});
if (_el !== 12 && _el !== 10 && i < 6) {
i++
}
if (_el === 12 && i > 0) {
i--
}
this.onKeyClick(_el, i)
}}
itemStyle={{
justifyContent: 'center',
alignItems: 'center',
flex: 1,
height: 50,
backgroundColor: '#FFF'
}}
renderItem={(_el, index) =>
this.configItemEl(_el, index)
}
/>

);
}

}

const styles = StyleSheet.create({
active: {
width: width / 3,
height: 50,
backgroundColor: '#0080FF',
color: '#FFF',
textAlign: 'center',
lineHeight: 50
},
forgot: {
marginRight: 10,
color: '#0080FF',
fontSize: 12,
fontWeight: null
},
passWorld: {
borderRadius: 10,
width: 10,
height: 10,
backgroundColor: '#ccc'
},
showPW: {
justifyContent: 'center',
alignItems: 'center',
borderColor: '#CCC',
borderWidth: 1,
borderStyle: 'solid',
width: 25,
height: 25
},
iconContainer: {
width: 25,
height: 25,
marginLeft: 10
},
header: {
width: width,
height: 45,
flexWrap: 'nowrap',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#FFF',
flexDirection: 'row',
alignContent: 'space-around',
borderBottomWidth: 1,
borderStyle: 'solid',
borderBottomColor: '#EAEAEA'
},
container: {
width: width,
height: height,
justifyContent: 'flex-end',
alignItems: 'flex-end',
backgroundColor: 'rgba(0,0,0,0.4)',
position: 'absolute',
top: -25
},
});

所需依赖原生react-native和ant-design RN；

type='deal'//verify,deal
title={'請輸入交易密碼'}
keyboardVisible={this.state.keyboardVisible}
toClose={this.onKeyboard}
getPasswordstr={(str) => { console.log(str) }}
getPasswordArr={(arr) => { console.log(arr) }}
forgot={() => { console.log(1111) }}
/>

代码比较简单，有这方面需求的小伙伴可以copy随时使用；

react-native,纯数字键盘组件；

你可能感兴趣的:(react-native)