Matrix React Native-创建灵活的输入矩阵

我正在尝试用react native实现一个线性代数计算器应用程序，但在创建矩阵输入数字时遇到了问题

我不希望矩阵的大小是固定的，而是希望它具有灵活性，以便用户可以根据自己的需要调整大小

到目前为止，我有：

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

class InputBox extends React.Component {
  render() {
        return (
            <View style={styles.inputBox}>
            </View>
        )
    }
}

export default class App extends React.Component {
  render() {
    return (
        <View style={styles.rootContainer}>
          <View style={styles.topContainer} />
          <View style={styles.matrixContainer}>
            { this._renderMatrixInputs() }
          </View>
        </View>
    );
  }

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

const styles = StyleSheet.create({
  rootContainer: {
    flex: 1
  },
  topContainer: {
    flex: .25,
  },
  matrixContainer: {
    flex: 8,

  },
  inputBox: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        borderBottomWidth: 0.5,
        margin: 10,
        borderColor: '#91AA9D'
    },
    inputRow: {
        flex: 1,
        maxHeight: 75,
        flexDirection: 'row',
        justifyContent: 'space-between'
    }

});

从“React”导入React；
从“react native”导入{样式表、文本、视图}；
类InputBox扩展了React.Component{
render（）{
返回(
)
}
}
导出默认类App扩展React.Component{
render（）{
返回(
{this._renderMatrixInputs（）}
);
}
_renderMatrixInputs（）{
//现在是3 x 3矩阵。。。。
让视图=[]；
设尺寸=3；
对于（var r=0；r

上面的代码没有功能，但它显示了我想要的外观

如果有人能帮我实现尺寸调整功能并正确实现文本输入框，我将不胜感激

---

谢谢

你发布的代码有什么问题？据我所知，您需要做的就是更改size变量并将其置于状态，或者通过props将其传递以使其更具动态性（您还需要替换嵌套for循环中的3）。然后只需在InputBox组件中添加一个

TextInput

。@AhmedWagdi您建议如何调整

TextInput

s的大小？我应该使用显式高度和宽度还是使用

flex

属性？感谢使用flex属性设置宽度，您已经正确设置了宽度，因此不需要更改任何内容。对于高度，它取决于您希望它的显示方式，您希望它在添加更多行时占据更多的高度，还是希望它保持相同的高度？@AhmedWagdi我希望它保持相同的高度。现在我很难将键盘关闭，因为react中的数字键盘没有“完成”按钮，在flex matrix中使用TouchableWithoutheedback是一种故障计量法，它可以执行以下操作：1）在

rootContainer

上尝试将高度限制在300左右2）从RN导入

键盘，避免查看
并将
rootContainer
包装在其中。3） 尝试将这些设置放在键盘上以避免出现视图：
在获得喜欢的设置之前，请随意使用配置