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

Question

我希望左边的那些文本与我右边的Textinputs对齐。我从api获取textinputs和文本，所以它们是动态的。我需要在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

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

无论是使用“视图样式”属性还是“文本”，如果包含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>