有没有办法对齐这些 <TextInput> 个框（行）？

Question

我正在 React Native 上做一个应用程序，我一直在尝试对齐这些输入框，我已经尝试了所有我关心的方法，但无法做到。The 'lines' I'm talking about, every line is an input box.

'top' 命令中使用的数字是我选择的任意数字，因为它们看起来正确，但也许有一种方法可以正确对齐它们

<Text style={{fontSize:20, color:'white', textAlign:'left', top:20, marginVertical:12,}}>Agressividade</Text>
            <TextInput
                style={{color:'white', fontSize:20,
                borderTopWidth : 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth : 1,
                borderColor:'white', height:30, width:170, marginVertical:6,
                position: 'absolute', right:1, top: 20}}
                keyboardType='decimal-pad'
            />
            <Text style={{fontSize:20, color:'white', textAlign:'left', top:20, marginVertical:12,}}>Agressividade</Text>
            <TextInput
                style={{color:'white', fontSize:20,
                borderTopWidth : 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth : 1,
                borderColor:'white', height:30, width:170,
                position: 'absolute', right:1, top: 78}}
                keyboardType='decimal-pad'
            />
            <Text style={{fontSize:20, color:'white', textAlign:'left', top:20, marginVertical:12,}}>Agressividade</Text>
            <TextInput
                style={{color:'white', fontSize:20,
                borderTopWidth : 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth : 1,
                borderColor:'white', height:30, width:170,
                position: 'absolute', right:1, top: 126}}
                keyboardType='decimal-pad'
            />
            <Text style={{fontSize:20, color:'white', textAlign:'left', top:20, marginVertical:12,}}>Agressividade</Text>
            <TextInput
                style={{color:'white', fontSize:20,
                borderTopWidth : 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth : 1,
                borderColor:'white', height:30, width:170,
                position: 'absolute', right:1, top: 178}}
                keyboardType='decimal-pad'
            />
            <Text style={{fontSize:20, color:'white', textAlign:'left', top:20, marginVertical:12,}}>Agressividade</Text>
            <TextInput
                style={{color:'white', fontSize:20,
                borderTopWidth : 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth : 1,
                borderColor:'white', height:30, width:170,
                position: 'absolute', right:1, top: 229}}
                keyboardType='decimal-pad'
            />
            <Text style={{fontSize:20, color:'white', textAlign:'left', top:20, marginVertical:12,}}>Agressividade</Text>
            <TextInput
                style={{color:'white', fontSize:20,
                borderTopWidth : 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth : 1,
                borderColor:'white', height:30, width:170,
                position: 'absolute', right:1, top: 281}}
                keyboardType='decimal-pad'
            />
            <Text style={{fontSize:20, color:'white', textAlign:'left', top:20, marginVertical:12,}}>Agressividade</Text>
            <TextInput
                style={{color:'white', fontSize:20,
                borderTopWidth : 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth : 1,
                borderColor:'white', height:30, width:170,
                position: 'absolute', right:1, top: 331}}
                keyboardType='decimal-pad'
            />
            <Text style={{fontSize:20, color:'white', textAlign:'left', top:20, marginVertical:12,}}>Agressividade</Text>
            <TextInput
                style={{color:'white', fontSize:20,
                borderTopWidth : 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth : 1,
                borderColor:'white', height:30, width:170,
                position: 'absolute', right:1, top: 382}}
                keyboardType='decimal-pad'
            />

Answer 1

1- 将文本和文本输入包装在视图容器中

2- container style => flexDirection: row 获取同一行的文本和输入

3- 输入默认没有边框，所以，设置 borderBottomColor & borderBottomWidth 以获得你想要的样式

你可以在零食上测试这段代码 https://snack.expo.dev/@salwa_soliman/input-styling

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <Text style={styles.label}>Label Text1</Text>
        <TextInput
          style={styles.input}
          placeholder="Type here"
        />
      </View>
        <View style={styles.inputContainer}>
        <Text style={styles.label}>Label Text2</Text>
        <TextInput
          style={styles.input}
          placeholder="Type here"
        />
      </View>
     </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems:"center"
  },
  inputContainer:{
    flexDirection:"row",
    justifyContent:"space-between",
    alignItems:"center",
    marginVertical:10
  },
  label: {
    width:"48%",
    fontSize:20
  },
  input:{
    width:"48%",
    borderBottomColor:"#000",
    borderBottomWidth:2,
    fontSize: 20,

  }
});

有没有办法对齐这些 <TextInput> 个框（行）？

Is there a way to align these <TextInput> boxes (lines)?

javascript

react-native