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 (<ModalanimationType="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 === '-' ?<TouchableOpacitykey={key}style={[styles.button,{backgroundColor:"#007FFF"}]}onPress={() => this.handlePress(key)}><Image resizeMode='center' source={require('./../res/jian.png')} style={styles.jian}></Image></TouchableOpacity>:<TouchableOpacitykey={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;