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.

Спасибо!

0 ответов

Другие вопросы по тегам