如何将文本与每个 Textinput 对齐 - React Native

Question

我希望左侧的文本与右侧的文本输入对齐。 我正在从 api 获取文本输入和文本，因此它们是动态的。我需要在 texinput 的左侧显示每个文本。 这是我的代码：

 textfieldsObject = () => {
    const obje = this.props.navigation.state.params.item;
    var keyvalue_to_json = JSON.parse(obje.keyValues);
    var textinputName = [];
    var foundTextFields = [];

    for (let i = 0; i < keyvalue_to_json.inputFields.length; i++) {
        if (keyvalue_to_json.inputFields[i].type === 'textfield') {
            foundTextFields.push(<TextInput placeholder={keyvalue_to_json.inputFields[i].placeholderText} style={styles.inputFields}
                onEndEditing={(e) => {
                    keyvalue_to_json.inputFields[i].inputValues = e.nativeEvent.text;
                    this.myInputFields.myTextFields[i] = keyvalue_to_json.inputFields[i];
                }}
            ></TextInput>) &&
                textinputName.push(<Text style={{ textAlign: 'left', flex: 2 }}>{keyvalue_to_json.inputFields[i].title}</Text>)
        }
    }
    return (
        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
            <View style={{ flex: 1 }}>
                {textinputName}
            </View>
            <View style={{ flex: 1 }}>
                {foundTextFields}
            </View>
        </View>
    )
}

Answer 1

我写了一小段代码。你可以试试这段代码。它可能会解决您的问题。也请check this code 进入小吃，并使用 Expo 应用程序直接运行以扫描 QR。请转c

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


export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View
          style={{
            justifyContent: 'center',
            alignSelf: 'center',
            alignItems: 'center',
            alignContent: 'center',
            flexDirection: 'row',
          }}>
          <Text style={{ textAlign: 'center', flex: 1, padding: 15 }}>
            {'Full name'}
          </Text>
          <TextInput
           placeholder='Enter Your Full Name'
          placeholderTextColor='#303030'
            style={{
              borderWidth: 1,
              borderColor: '#000',
              flex: 1,
              padding: 15,
            }}/>

        </View>
         <View
          style={{
            justifyContent: 'center',
            alignSelf: 'center',
            alignItems: 'center',
            alignContent: 'center',
            flexDirection: 'row',
          }}>
          <Text style={{ textAlign: 'center', flex: 1, padding: 15 }}>
            {'CRP Number'}
          </Text>
          <TextInput
          placeholder='Enter Your CRP Number'
          placeholderTextColor='#303030'
            style={{
              borderWidth: 1,
              borderColor: '#000',
              flex: 1,
              padding: 15,
            }}/>

        </View>
         <View
          style={{
            justifyContent: 'center',
            alignSelf: 'center',
            alignItems: 'center',
            alignContent: 'center',
            flexDirection: 'row',
          }}>
          <Text style={{ textAlign: 'center', flex: 1, padding: 15 }}>
            {'Company Name'}
          </Text>
          <TextInput
             placeholder='Enter Your Company Name'
          placeholderTextColor='#303030'
            style={{
              borderWidth: 1,
              borderColor: '#000',
              flex: 1,
              padding: 15,
            }}/>

        </View>
         <View
          style={{
            justifyContent: 'center',
            alignSelf: 'center',
            alignItems: 'center',
            alignContent: 'center',
            flexDirection: 'row',
          }}>
          <Text style={{ textAlign: 'center', flex: 1, padding: 15 }}>
            {'Company CVR '}
          </Text>
          <TextInput
          placeholder='Enter Your company CVR'
          placeholderTextColor='#303030'
            style={{
              borderWidth: 1,
              borderColor: '#000',
              flex: 1,
              padding: 15,
            }}>
            {'Enter Your company CVR'}
          </TextInput>
        </View>

        <Text style={{ color:'#fff',borderRadius:50, width:300, height:50, textAlign:'center', padding:15, marginTop:70,backgroundColor:'#00b5ec'}}>{"Click to sign in"}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    marginTop: 10,
    marginRight:1
  },
});

更新的答案请检查

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

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      jsonData: [
        { id: 1, textName: 'Hello', textInputName: 'Full Name' },
        {
          id: 2,
          textName: 'Hello',
          textInputName: 'Last Name',
        },
        {
          id: 3,
          textName: 'Hello',
          textInputName: 'Date of Birth',
        },
        {
          id: 4,
          textName: 'Hello',
          textInputName: 'Address',
        },
        { id: 1, textName: 'Hello', textInputName: 'Full Name' },
        {
          id: 2,
          textName: 'Hello',
          textInputName: 'Last Name',
        },
        {
          id: 3,
          textName: 'Hello',
          textInputName: 'Date of Birth',
        },
        {
          id: 4,
          textName: 'Hello',
          textInputName: 'Address',
        },
        { id: 1, textName: 'Hello', textInputName: 'Full Name' },
        {
          id: 2,
          textName: 'Hello',
          textInputName: 'Last Name',
        },
        {
          id: 3,
          textName: 'Hello',
          textInputName: 'Date of Birth',
        },
        {
          id: 4,
          textName: 'Hello',
          textInputName: 'Address',
        },
      ],
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          style={{ width: '100%', flex: 1 }}
          data={this.state.jsonData}
          showsVerticalScrollIndicator={false}
          renderItem={({ item }) => (
            <View
              style={{
                justifyContent: 'center',
                alignSelf: 'center',
                alignItems: 'center',
                alignContent: 'center',
                flexDirection: 'row',
              }}>
              <Text style={{ textAlign: 'center', flex: 1, padding: 15 }}>
                {item.textName}
              </Text>
              <TextInput
                placeholder={item.textInputName}
                placeholderTextColor="#303030"
                style={{
                  borderWidth: 1,
                  borderColor: '#000',
                  flex: 1,
                  padding: 15,
                }}
              />
            </View>
          )}
        />

        <Text
          style={{
            color: '#fff',
            borderRadius: 50,
            width: 300,
            height: 50,
            textAlign: 'center',
            padding: 15,
            marginTop: 10,
            backgroundColor: '#00b5ec',
            marginBottom: 20,
          }}>
          {'Click to sign in'}
        </Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,

    marginTop: 10,
    marginRight: 1,
  },
});

我还添加了更新的零食博览会请检查

https://snack.expo.io/@vishal7008/anxious-candy

Answer 2

我建议您创建相同大小的视图。完成此操作后，将文本组件放入所需的边距或视图样式属性以对齐文本。

无论是视图样式属性还是文本，如果包含两个文本的视图大小相同，则文本组件将相互对齐。

Answer 3

正如您在下面的代码中看到的，我所做的是将您的文本组件用
视图，并且包裹文本的两个视图具有完全相同的大小。 完成此操作后，这些视图中的 Text 组件具有 100% 的宽度和高度，因此它将与视图的大小相同。这样，您将在主视图中使用 flex-direction = row 对齐 2 个组件，并且文本将对齐。 复制下面的代码并在我注释代码的两个视图的样式道具中设置视图的大小

 <View
                style={{
                    flex: 1,
                    flexDirection: 'row',
                    justifyContent: 'space-between'
                }}
            >
                <View
                    style={{
                        flex: 1,
                        //Here You set up with and height
                    }}
                >
                    <Text
                        style={{
                            height: '100%',
                            width: '100%',
                            textAlign: 'center'
                        }}
                    >
                        {textinputName}
                    </Text>
                </View>

                <View
                    style={{
                        flex: 1,
                        //And here you set up the same with and height than the first view
                    }}
                >
                    <Text
                        style={{
                            height: '100%',
                            width: '100%',
                            textAlign: 'center'
                        }}
                    >
                        {foundTextFields}
                    </Text>
                </View>
            </View>