Question

我希望左侧的文本与右侧的Textinputs对齐。我正在从api获取textinputs和text，因此它们是动态的。我需要在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 app扫描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>

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

3 个答案: