react native 手搓数字键盘

react native 手搓数字键盘

本文展示了一个React Native实现的数字键盘组件ModalKeyboard。该组件包含以下特点： 使用Modal容器实现从底部滑出的动画效果 键盘布局为3x4的网格结构，包含数字0-9、"重置"和"-"按钮 支持点击数字提交功能，通过onSubmit回调传递按键值 自定义样式包括圆角按钮、背景色和字体大小 "-"按钮使用图片替代文字显示 通过点击模态框外部区域关闭键盘 组件采用响应式设计，使用zero工具函数动态计算布局尺寸，适用于不同屏幕

	import React, { Component } from 'react';
	import { Modal, View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
	class ModalKeyboard extends Component {
	  constructor(props) {
	    super(props);
	    this.state = {
	      visible: false,
	    };
	  }
	
	  handlePress = (key) => {
	    this.props.onSubmit(key);
	  };
	  closeKeyboard = () => {
	    this.setState({ visible: false });
	  }
	
	  render() {
	    const { visible } = this.state;
	    const keys = [
	      ['1', '2', '3'],
	      ['4', '5', '6'],
	      ['7', '8', '9'],
	      ['重置', '0', '-'],
	    ];
	
	    return (
	      <Modal
	        animationType="slide"
	        transparent={true}
	        visible={visible}
	        onRequestClose={() => {
	          this.setState({ visible: false });
	        }}
	      >
	        <TouchableOpacity style={styles.centeredView} onPress={this.closeKeyboard}>
	          <TouchableOpacity style={styles.modalView} activeOpacity={1} > 
	            {keys.map((row, rowIndex) => (
	              <View key={rowIndex} style={styles.row}>
	                {row.map((key) => (
	
	                  key === '-' ?
	                    <TouchableOpacity
	                      key={key}
	                      style={[styles.button,{backgroundColor:"#007FFF"}]}
	                      onPress={() => this.handlePress(key)}
	                    >
	                      <Image resizeMode='center' source={require('./../res/jian.png')} style={styles.jian}></Image>
	                    </TouchableOpacity>
	                    :
	                    <TouchableOpacity
	                      key={key}
	                      style={styles.button}
	                      onPress={() => this.handlePress(key)}
	                    >
	                      <Text style={[styles.buttonText, key == '重置'? { fontSize: zero.yFont(24) } : {}]}>{key}</Text>
	                    </TouchableOpacity>
	
	
	
	
	                ))}
	              </View>
	            ))}
	          </TouchableOpacity>
	        </TouchableOpacity>
	      </Modal>
	    );
	  }
	}
	
	const styles = StyleSheet.create({
	  centeredView: {
	    flex: 1,
	    justifyContent: "flex-end",
	    alignItems: 'center',
	  },
	  modalView: {
	    backgroundColor: '#333333',
	    width: '100%',
	    height: zero.yHeight(360),
	    alignItems: 'center',
	    elevation: 5,
	  },
	  row: {
	    flexDirection: 'row',
	  },
	  cardContainer: {
	    marginTop: zero.yHeight(10),
	    marginRight: zero.yWidth(10),
	    // marginHorizontal: zero.yWidth(10),
	    width: zero.yWidth(120),
	    height: zero.yHeight(70),
	    borderRadius: zero.yWidth(10),
	  },
	  button: {
	    marginTop: zero.yHeight(10),
	    marginRight: zero.yWidth(10),
	    width: zero.yWidth(120),
	    height: zero.yHeight(70),
	    alignItems: 'center',
	    justifyContent: 'center',
	    borderRadius: zero.yWidth(10),
	    backgroundColor: '#666',
	
	  },
	  buttonText: {
	    color: "#fff",
	    fontSize: zero.yFont(40),
	  },
	  jian: {
	    width: zero.yWidth(36),
	  }
	});
export default ModalKeyboard;