反应原生：有没有办法像我的例子一样放置文本？答案

【问题标题】：react native : there is way to place text like my example?反应原生：有没有办法像我的例子一样放置文本？
【发布时间】：2020-08-26 10:10:16
【问题描述】：

我需要像下面的例子那样放置一些文本：

{item.Sampling_Request_ID}   {item.Facility_Name}

{item.Sampling_Due_Date}     {item.Water_Source_Name}

我尝试修复这个地方作为示例，但它对我不起作用，我必须知道实现它的方法。在我的示例中，您可以看到应该符合我需要的文本。

这是我尝试这样做的方式：

function renderItem({ item, index }) {
    let name = '';

    if (item.Facility_Name) {
      name = item.Consumer_Name;
    } else {
      name = item.Consumer_Name;
    }
    return (
      <TouchableOpacity
        style={{
          flex: 1,
          paddingVertical: 15,
          paddingHorizontal: 10,
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          borderWidth: 1,
          borderColor: 'white',
          backgroundColor: index % 2 == 0 ? '#dde6eb' : '#d1f0da',
        }}
        onPress={() => selectItem(data)}
      >
        <View
          style={{
            flex: 1,
            alignItems: 'flex-start',
          }}
        >
          <Text style={styles.lightText}>
           {item.Facility_Name}
          </Text>
        </View>
        <View
          style={{
            alignItems: 'flex-end',
          }}
        >
          <Text style={styles.lightText}>{item.Sampling_Request_ID}</Text>
        </View>
         <View
          style={{
            flex: 1,
          }}
        >
          <Text style={styles.lightText}>{item.Water_Source_Name}</Text>
        </View>
<View
          style={{
            flex: 1,
          }}
        >
          <Text style={styles.lightText}>{item.Sampling_Due_Date}</Text>
        </View>
     
      </TouchableOpacity>
    );
  }

【问题讨论】：

标签： javascript css reactjs react-native flexbox

【解决方案1】：

通过以下方式尝试。我希望它有效。

 <TouchableOpacity
    style={{flex: 1}}
    onPress={onPress}
 >
    <View style = {{ width: '100%' }}>
      <View style = {{ flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
        <Text>{item.Sampling_Request_ID}</Text>
        <Text>{item.Facility_Name}</Text>
      </View>
      <View style = {{ flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
        <Text>{item.Sampling_Due_Date}< </Text>
        <Text>{item.Water_Source_Name}</Text>
      </View>
     </View>
 </TouchableOpacity>

【讨论】：

【解决方案2】：

试试这个

<TouchableOpacity
        style={{
          flex: 1,
          paddingVertical: 15,
          paddingHorizontal: 10,
          // flexDirection: 'row',
          // justifyContent: 'space-between',
          alignItems: 'center',
          borderWidth: 1,
          borderColor: 'white',
          backgroundColor: index % 2 == 0 ? '#dde6eb' : '#d1f0da',
        }}
        onPress={() => selectItem(data)}
      >
        <View
          style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'space-between'
          }}
        >
          <Text style={styles.lightText}>
           {item.Sampling_Request_ID}
          </Text>
          <Text style={styles.lightText}>{item.Facility_Name}</Text>
        </View>
        <View
          style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'space-between'
          }}
        >
          <Text style={styles.lightText}>
           {item.Sampling_Due_Date}
          </Text>
          <Text style={styles.lightText}>{item.Water_Source_Name}</Text>
        </View>
       
     
      </TouchableOpacity>

【讨论】：

【解决方案3】：

您可以将 Sampling_Request_ID 和 Facility_Name 分组到一个将 frexDirection 设置为 row 的父视图中，然后也将 Sampling_Due_Date 和 Water_Source_Name 分组到他们的视图中。以下代码应该按照您的描述工作

function renderItem({ item, index }) {
  let name = "";

  if (item.Facility_Name) {
    name = item.Consumer_Name;
  } else {
    name = item.Consumer_Name;
  }
  return (
    <TouchableOpacity
      style={{
        flex: 1,
        paddingVertical: 15,
        paddingHorizontal: 10,
        //flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
        borderWidth: 1,
        borderColor: "white",
        backgroundColor: index % 2 == 0 ? "#dde6eb" : "#d1f0da",
      }}
      onPress={() => selectItem(data)}
    >
      <View
        style={{
          flex: 1,
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <View
          style={{
          }}
        >
          <Text style={styles.lightText}>{item.Sampling_Request_ID}</Text>
        </View>
        <View
          style={{
            flex: 1,
          }}
        >
          <Text style={styles.lightText}>{item.Facility_Name}</Text>
        </View>
      </View>
      <View
        style={{
          flex: 1,
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <View
          style={{
            flex: 1,
          }}
        >
          <Text style={styles.lightText}>{item.Sampling_Due_Date}</Text>
        </View>
        <View
          style={{
            flex: 1,
          }}
        >
          <Text style={styles.lightText}>{item.Water_Source_Name}</Text>
        </View>
      </View>
    </TouchableOpacity>
  );
}

【讨论】：