react native:有没有办法像我的例子一样放置文本

Question

我需要放置一些文本，如下面的示例：

{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>
);
}

Answer 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>

Answer 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>

Answer 3

您可以将Sampling_Request_ID&Facility_Name在一个frexDirection设置为行的父视图中，然后将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>
);
}