[英]Hi i am new to React Native, Using Native-base I am trying to design Card View
enter image description here ][2][,[I am facing problem here inside the Card, able to see description part i am trying to implement its coming below the image actually it suppose to come beside the image `
在此处输入图像描述][2][,[我在卡内遇到问题,能够看到描述部分我正在尝试实现它位于图像下方,实际上它应该位于图像旁边`
<ListItem>
<Card
style={{
marginTop: 0,
marginBottom: 0,
marginRight: 0,
marginLeft: 0,
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
flexDirection: 'row',
}}>
<View style={{flex: 1}}>
<CardItem>
<Thumbnail
source={require('../../assets/images/restaurant_128.png')}
/>
</CardItem>
</View>
<View style={{flex: 3, flexDirection: 'column'}}>
<CardItem>
<Body>
<Text>{item.Title}</Text>
<Text style={{backgroundColor: 'green'}}>
{item.Description}
</Text>
</Body>
</CardItem>
</View
</Card>
</ListItem>
` `
try this:-尝试这个:-
<View style={{
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center",
backgroundColor: "#B8B2B2",
width: "100%",
height: 100
}}>
<View style={{
width: "30%",
backgroundColor: "red",
height: 100
}}>
<Text>left image here</Text>
</View>
<View style={{
width: "70%",
backgroundColor: "#B8B2B2",
height: 100
}}>
<View style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#fff",
height: 50
}}>
<View style={{
width: "30%",
backgroundColor: "teal",
height: 50
}}>
<Text>lamb samosa</Text>
</View>
<View style={{
width: "30%",
backgroundColor: "teal",
height: 50
}}>
<Text>$4.5</Text>
</View>
</View>
<View style={{
width: "100%",
backgroundColor: "#B8B2B2",
height: 50
}}>
<Text>Lorem Ipsum</Text>
</View>
</View>
</View>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.