android - React Native: 複数の数値入力の処理

Question

数値テキスト入力のマトリックスを作成中ですが、数値キーボードには [戻る]または[次へ] ボタンがないため、多くの問題がありました。さらに、数字キーボードにはDoneバーがないため、TouchableWithoutFeedbackコンポーネントを使用して非表示にする必要がありました。

反応ネイティブのマトリックスに多くの数値をシームレスに入力するための推奨される方法があるかどうか疑問に思っていますTextInputか?

以下は私のコードです。アプリケーションのレイアウトに役立つようにコンテナーに色を付けました。

import React from 'react';
import { StyleSheet, Text, View, TextInput, TouchableWithoutFeedback, Keyboard} from 'react-native';

class InputBox extends React.Component {
  render() {
        return (
          <View style={styles.inputContainer}>
            <TextInput
              keyboardType="numeric"
              style={styles.matrixNumberInput}
            />
          </View>
        )
    }
}

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {'size': 3};
  }

  render() {
    return (
      <View style={styles.rootContainer}>
        <TouchableWithoutFeedback  onPress={Keyboard.dismiss}>
          <View style={styles.appContainer}>
            <View style={styles.matrixContainer}>
              { this._renderMatrixInputs() }
            </View>

            <View style={styles.solutionsContainer}>
              {/* solutions here */}
            </View>

          </View>
      </TouchableWithoutFeedback>
    </View>

    );
  }

  _renderMatrixInputs() {
    // harcoded 3 x 3 matrix for now....
    let views = [];
    let {size} = this.state;
      for (var r = 0; r < size; r++) {
          let inputRow = [];
          for (var c = 0; c < size; c++) {
              inputRow.push(
                <InputBox value={'X'} key={r.toString() +c.toString()} />
              );
          }
        views.push(<View style={styles.inputRow} key={r.toString()}>{inputRow}</View>)
        }
    return views
  }
}

const styles = StyleSheet.create({
  rootContainer: {
    flex:25,
    backgroundColor: 'lightyellow',
  },
  appContainer: {
    flex:1,
    backgroundColor: 'lightblue'
  },
  matrixContainer: {
    marginTop: 25,
    flex: 3, // take up half of screen
    backgroundColor: 'ivory',
  },
  solutionsContainer: {
    flex:5, // take up other half of screen
    backgroundColor: 'lavenderblush',
  },
  inputRow: {
      flex: 1,
      maxHeight: 75,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
  },
  inputContainer: {
      flex: 1,
      margin: 3,
      maxHeight: 35,
      maxWidth: 75,
      borderBottomWidth: 1,
      borderBottomColor: 'gray',
  },

  matrixNumberInput: {
    flex:1,
    backgroundColor:"azure"
  }

});

ありがとう！