1

我正在构建数字文本输入矩阵，并且由于数字键盘没有返回或下一步按钮而遇到了很多麻烦。另外，数字键盘没有一个Done栏，所以我不得不使用TouchableWithoutFeedback组件来处理它的关闭。

我想知道是否有推荐的方法将许多数字无缝输入到 react-native 矩阵中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"
  }

});

谢谢！

4

1 回答 1

2

为了处理下一个并在键盘中完成，您可以使用react-native-smart-scroll-view。这是一个使用 textInputs 的滚动视图。

于 2017-04-26T05:23:11.670 回答