0

我正在尝试使用 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'
    }

});

上面的代码不起作用，但它显示了我想要的外观。这里是在 iPhone 模拟器上渲染的

如果有人可以帮助我实现调整大小功能并帮助正确实现 TextInput 框，我将不胜感激。

谢谢！

4

0 回答 0