时间戳

首页 > 解决方案 > 在本机反应中无法换行

css - 在本机反应中无法换行

问题描述

我试图在姓名和出生、地址和街道地址、电子邮件和号码之间换行。姓名、地址和电子邮件应与图标位于同一行。这可能并不难，但我无法绕开它。

const persons = {
    name: " Linda Hansen",
    birth: "01.01.2002",
    address: "  Dalen 24",
    streetAddress: "Leikanger 6863",
    email: "  Linda.Hansen@gmail.com",
    number: "12345678",
};

export default function UserInfo() {
    return (
        <View style={styles.centerContainer}>
            <Image source={{ uri: uri[0].userIcon }} style={styles.profileIcon} />
            <View style={styles.userInfoContainer}>
                <View style={styles.iconContainer}>
                <Icon name="user" size={40} ></Icon>
                </View>
                <Text style= {styles.textStyle}> {persons.name} </Text>
                <Text style={styles.textStyleSmall}> {persons.birth} </Text>
            </View>
            <View style={styles.userInfoContainer}>
                <View style={styles.iconContainer}>
                    <Icon name="home" size={40} ></Icon>
                </View>
                <Text style={styles.textStyle}>{persons.address}</Text>
                <Text style={styles.textStyleSmall}>{persons.streetAddress}</Text>
            </View>
            <View style={styles.userInfoContainer}>
                <View style={styles.iconContainer}>
                    <Icon name="phone" size={40} ></Icon>
                </View>
                <Text style = {styles.textStyle}> {persons.email}</Text>
                <Text style = {styles.textStyleSmall}>{persons.number} </Text>
            </View>

CSS：

userInfoContainer: {
      width: "100%",
      borderBottomColor: "gray",
      borderBottomWidth: 1,
      backgroundColor: "yellow",
      flexDirection: "row",

目前看起来是这样的：

例子

标签： cssreact-native

解决方案

export default function UserInfo() {
return (
    <View style={styles.centerContainer}>
    <Image source={{ uri: uri[0].userIcon }} style={styles.profileIcon} />


        <View style={styles.userInfoContainer}>
            <View style={styles.iconContainer}>
            <Icon name="user" size={40} ></Icon>
            </View>
            <Text style= {styles.textStyle}> {persons.name}{“\n”} </Text>
            <Text style={styles.textStyleSmall}> {persons.birth} </Text>
        </View>



        <View style={styles.userInfoContainer}>
            <View style={styles.iconContainer}>
                <Icon name="home" size={40} ></Icon>
            </View>
            <Text style={styles.textStyle}>{persons.address}{“\n”}</Text>
            <Text style={styles.textStyleSmall}>{persons.streetAddress}</Text>
        </View>



        <View style={styles.userInfoContainer}>
            <View style={styles.iconContainer}>
                <Icon name="phone" size={40} ></Icon>
            </View>
            <Text style = {styles.textStyle}> {persons.email}{“\n”}</Text>
            <Text style = {styles.textStyleSmall}>{persons.number} </Text>
        </View>

推荐阅读