javascript - 如何在react native的同一行上设置两个输入？

嘿，我想在同一行上设置两个textInputs，名称为
到期日和CVV在Android模拟器中。

<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={styles.label}style= {{width : 100}}>Expiration date</Text>
    <View style={styles.inputWrap}>
        <TextInput style={styles.inputdate} />
    </View>

      <Text style={styles.label}>CVV</Text>
   <View style={styles.inputWrap}>
      <TextInput  style={styles.inputcvv } maxLength={17} />
  </View>

在这里，两个textInputs都包含CSS
\

inputWrap: {
             borderColor: '#cccccc',
             borderBottomWidth: 1,
             marginBottom: 10,
   },
     inputdate: {
        fontSize: 14,
        marginBottom : -12,
        color: '#6a4595',
      },
      inputcvv: {
        fontSize: 14,
        marginBottom : -12,
        color: '#6a4595',
      },

请让我知道如何在同一行上设置此。.在此先感谢

最佳答案

使用React Native，您需要使用 Flexbox 来布置您的组件。 checkout Flexbox docs here。

您想做这样的事情:

import React, { Component } from "react";
import { Text, View, StyleSheet, TextInput } from "react-native";

export default class App extends Component {
  render() {
    return (
      <View style={styles.row}>
        <View style={styles.inputWrap}>
          <Text style={styles.label}>Expiration date</Text>
          <TextInput style={styles.inputdate} />
        </View>

        <View style={styles.inputWrap}>
          <Text style={styles.label}>CVV</Text>
          <TextInput style={styles.inputcvv} maxLength={17} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  row: {
    flex: 1,
    flexDirection: "row"
  },
  inputWrap: {
    flex: 1,
    borderColor: "#cccccc",
    borderBottomWidth: 1,
    marginBottom: 10
  },
  inputdate: {
    fontSize: 14,
    marginBottom: -12,
    color: "#6a4595"
  },
  inputcvv: {
    fontSize: 14,
    marginBottom: -12,
    color: "#6a4595"
  }
});

这里的重要部分是flexDirection: "row"元素上的<View style={styles.row}>和flex: 1元素上的<View style={styles.inputWrap}>。

您可以使用Snack(Expo)编辑和运行此代码段:

https://snack.expo.io/rySUxTKuZ