React Native的自定义数字键盘布局

Question

React Native的自定义数字键盘布局是否有任何包或资源帮助，如此图像？

Answer 1

我不确定，但我认为您可以使用beefe来设置键盘样式。

图片：

示例代码：

"use strict";

import React, { View, Text, StyleSheet } from "react-native";
import Keyboard from "react-native-keyboard";

let model = {
  _keys: [],

  _listeners: [],

  addKey(key) {
    this._keys.push(key);
    this._notify();
  },

  delKey() {
    this._keys.pop();
    this._notify();
  },

  clearAll() {
    this._keys = [];
    this._notify();
  },

  getKeys() {
    return this._keys;
  },

  onChange(listener) {
    if (typeof listener === "function") {
      this._listeners.push(listener);
    }
  },

  _notify() {
    this._listeners.forEach(listner => {
      listner(this);
    });
  }
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ""
    };
  }

  componentDidMount() {
    model.onChange(model => {
      this.setState({ text: model.getKeys().join("") });
    });
  }

  _handleClear() {
    model.clearAll();
  }

  _handleDelete() {
    model.delKey();
  }

  _handleKeyPress(key) {
    model.addKey(key);
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          <Text style={styles.text}>{this.state.text}</Text>
        </View>
        <Keyboard
          keyboardType="decimal-pad"
          onClear={this._handleClear.bind(this)}
          onDelete={this._handleDelete.bind(this)}
          onKeyPress={this._handleKeyPress.bind(this)}
        />
      </View>
    );
  }
}

Answer 2

您可以在TextInput中使用keyboardType={'phone-pad'}，如下所示。

<TextInput 
    style={styles.phoneNumberInput} 
    maxLength={10} 
    keyboardType={'phone-pad'} 
    onChangeText={
        (number) => this.onChange(number)
    } 
    value={this.state.myNumber} 
    returnKeyType='go'
    onSubmitEditing={
        () => this.xyz()
    } 
/>

Looks Like this

参考：TextInput Props

Answer 3

我们使用https://github.com/reactnativecn/react-native-custom-keyboard

完成了类似的自定义键盘

这不是100％直截了当，但我们已经成功了。它允许您将此键盘绑定到输入，以使其像本机键盘一样运行。