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.
Спасибо!