问题描述
嗨,我希望上面显示的日期在视图的右侧,但是却无法执行,有人可以提出任何建议吗?
我的代码:
<View style={{padding: 10}}>
{props.data.data.content != undefined &&
props.data.data.content != null &&
props.data.data.content.map((item) => {
return (
<View
style={{
flexDirection: 'row',padding: 10,backgroundColor: '#fff',elevation: 3,margin: '2%',borderRadius: 5,}}>
<View>
<Image
source={require('../assets/atbirth.jpg')}
style={{height: 40,width: 50}}
resizeMode="contain"
/>
</View>
<View>
<View style={{flexDirection: 'row'}}>
<Text
key={item.id}
style={{
fontFamily: 'Roboto',fontSize: 18,fontWeight: 'bold',}}>
{item.name}
</Text>
<View >
<Text style={{color: 'grey',fontSize: 12,}}>
{item.display_date}
</Text>
</View>
</View>
<View style={{flexDirection: 'row'}}>
{item.vaccine_list.map((i) => {
return (
<View style={{flexDirection: 'row'}}>
<Text style={{fontFamily: 'Roboto',fontSize: 15}}>
{i.name},</Text>
</View>
);
})}
</View>
</View>
</View>
);
})}
</View>
让我知道,哪里出了问题以及如何实现上述行为,任何建议都很好。
解决方法
您可以使用Flex对齐元素。
<View style={{padding: 10}}>
{props.data.data.content != undefined &&
props.data.data.content != null &&
props.data.data.content.map((item) => {
return (
<View
style={{
flexDirection: 'row',padding: 10,backgroundColor: '#fff',elevation: 3,margin: '2%',borderRadius: 5,}}>
<View>
<Image
source={require('../assets/atbirth.jpg')}
style={{height: 40,width: 50}}
resizeMode="contain"
/>
</View>
<View style={{flex:1}}>
<View style={{flexDirection: 'row',flex: 1}}>
<Text
key={item.id}
style={{
fontFamily: 'Roboto',fontSize: 18,fontWeight: 'bold',}}>
{item.name}
</Text>
<View style={{alignItems: 'flex-end'}}>
<Text style={{color: 'grey',fontSize: 12,}}>
{item.display_date}
</Text>
</View>
</View>
<View style={{flexDirection: 'row'}}>
{item.vaccine_list.map((i) => {
return (
<View style={{flexDirection: 'row'}}>
<Text style={{fontFamily: 'Roboto',fontSize: 15}}>
{i.name},</Text>
</View>
);
})}
</View>
</View>
</View>
);
})}
</View>
使用Flex,您将占用所有可用空间,然后可以将日期向右对齐