React Native：处理多个数字输入

Question

我正在构建一个数字文本输入矩阵，由于数字键盘没有 Return 或 Next，因此遇到了很多麻烦按钮。另外，数字键盘缺少Done 栏，所以我不得不使用TouchableWithoutFeedback 组件来处理关闭它。

我想知道是否有推荐的方法将许多数字无缝输入到 react-native TextInputs 的矩阵中？

下面是我的代码，我为容器着色以帮助布置应用程序。

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"
  }

});

谢谢！

Answer 1

要在键盘中处理 next 和 done，您可以使用react-native-smart-scroll-view。这是一个用于处理 textInputs 的滚动视图。