如何在 React Native 中使我的卡片视图成为圆形
[英]How can I make my card view littile circular in react native
问题描述
//
In below code I am trying to make on ui according to my ux design .
在下面的代码中，我试图根据我的 ux 设计在 ui 上制作。 But One problem i am facing is not able to make card like same in ux , in ux its someting circular ,but in my code its not coming.但是我面临的一个问题是无法在 ux 中制作相同的卡片，在 ux 中它是某种循环，但在我的代码中它不会出现。 It tried with border radius also .它也尝试使用边界半径。 Please suggest where I am wrong请建议我错在哪里
<View style={{ marginBottom: 10, marginLeft: 5, marginRight: 5, borderRadius: 2, padding: 10 }} >
<Card >
<CardItem header style={{ flexDirection: 'row', backgroundColor: '#fff', width: '100%', justifyContent: 'space-between', borderBottomColor: '#f1f1f1', borderBottomWidth: 1,borderRadius: 80 }}>
<View style={{paddingTop:10 }}>
<RegularText text={`${'Wallet Balance'}`} textColor='grey'style={{ fontWeight: 'bold', flexWrap: 'wrap',color:'grey' }} />
</View>
<View style = {{ width : wp('10%'),height: wp('10%'),backgroundColor : '#E091C9' ,borderRadius : hp('1%'), margin : 8,flexDirection :'row',justifyContent :'center',alignItems : 'center'}}>
<SvgCss xml={WALLET} width={15} height={15} />
</View>
<View style={{
flexDirection: 'column',
height: 25, paddingRight: 10, paddingLeft: 10, paddingTop: 5,paddingBottom:30}}>
<SmallText text={'MUR 110.00'} textColor='red' />
<SmallText text={'Add Money'} textColor='blue' />
</View>
</CardItem>
<View style = {{flexDirection : 'row',paddingLeft:24,paddingRight:24}}>
{info.tecnologies.map(
(data, index) => {
return (
<View>
<View style = {{width : wp('14%'),height: wp('14%'),backgroundColor : 'rgb(163, 153, 233)',borderRadius : hp('2%'), margin : 10,flexDirection :'row',justifyContent :'center',alignItems : 'center'}}>
<SvgCss xml={PAY_BILL} width={15} height={15} />
</View>
<View style={{paddingLeft:15,paddingBottom:15}}>
<SmallText text={'Pay Bill'} textColor='grey' />
</View>
</View>
)
}
)}
</View>
</Card>
</View>
2 个解决方案
解决方案1
1 已采纳 2020-01-06 06:55:43
You should try this :你应该试试这个：
<View style={{ marginBottom: 10, marginLeft: 5, marginRight: 5, borderRadius: 2, padding: 10 }} >
<Card style={{ borderRadius: 8 }}>
<CardItem header style={{ flexDirection: 'row', backgroundColor: '#fff', width: '100%', justifyContent: 'space-between', borderBottomColor: '#f1f1f1', borderBottomWidth: 1,borderRadius: 80 }}>
<View style={{paddingTop:10 }}>
<RegularText text={`${'Wallet Balance'}`} textColor='grey'style={{ fontWeight: 'bold', flexWrap: 'wrap',color:'grey' }} />
</View>
<View style = {{ width : wp('10%'),height: wp('10%'),backgroundColor : '#E091C9' ,borderRadius : hp('1%'), margin : 8,flexDirection :'row',justifyContent :'center',alignItems : 'center'}}>
<SvgCss xml={WALLET} width={15} height={15} />
</View>
<View style={{
flexDirection: 'column',
height: 25, paddingRight: 10, paddingLeft: 10, paddingTop: 5,paddingBottom:30}}>
<SmallText text={'MUR 110.00'} textColor='red' />
<SmallText text={'Add Money'} textColor='blue' />
</View>
</CardItem>
<View style = {{flexDirection : 'row',paddingLeft:24,paddingRight:24}}>
{info.tecnologies.map(
(data, index) => {
return (
<View>
<View style = {{width : wp('14%'),height: wp('14%'),backgroundColor : 'rgb(163, 153, 233)',borderRadius : hp('2%'), margin : 10,flexDirection :'row',justifyContent :'center',alignItems : 'center'}}>
<SvgCss xml={PAY_BILL} width={15} height={15} />
</View>
<View style={{paddingLeft:15,paddingBottom:15}}>
<SmallText text={'Pay Bill'} textColor='grey' />
</View>
</View>
)
}
)}
</View>
</Card>
</View>
解决方案2
1 2020-01-06 07:27:10
For your another question :对于您的另一个问题：
<View style={{ marginBottom: 10, marginLeft: 5, marginRight: 5, borderRadius: 2, padding: 10 }} >
<Card style={{ borderRadius: 8 }}>
<CardItem header style={{ flexDirection: 'row', backgroundColor: '#fff', width: '100%', justifyContent: 'space-between', borderBottomColor: '#f1f1f1', borderBottomWidth: 1,borderRadius: 80 }}>
<View style={{paddingTop:10 }}>
<RegularText text={`${'Wallet Balance'}`} textColor='grey'style={{ fontWeight: 'bold', flexWrap: 'wrap',color:'grey' }} />
</View>
<View style = {{ width : wp('10%'),height: wp('10%'),backgroundColor : '#E091C9' ,borderRadius : hp('1%'), margin : 8,flexDirection :'row',justifyContent :'center',alignItems : 'center', alignSelf : 'flex-end'}}>
<SvgCss xml={WALLET} width={15} height={15} />
<View style={{
flexDirection: 'column',
height: 25, paddingRight: 10, paddingLeft: 10, paddingTop: 5,paddingBottom:30}}>
<SmallText text={'MUR 110.00'} textColor='red' />
<SmallText text={'Add Money'} textColor='blue' />
</View>
</View>
</CardItem>
<View style = {{flexDirection : 'row',paddingLeft:24,paddingRight:24}}>
{info.tecnologies.map(
(data, index) => {
return (
<View>
<View style = {{width : wp('14%'),height: wp('14%'),backgroundColor : 'rgb(163, 153, 233)',borderRadius : hp('2%'), margin : 10,flexDirection :'row',justifyContent :'center',alignItems : 'center'}}>
<SvgCss xml={PAY_BILL} width={15} height={15} />
</View>
<View style={{paddingLeft:15,paddingBottom:15}}>
<SmallText text={'Pay Bill'} textColor='grey' />
</View>
</View>
)
}
)}
</View>
</Card>
</View>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
React Native：我怎样才能让我的抽屉工作 - React Native: How can i make My DRAWER working
我怎样才能使它在a.map上的过滤器与本机反应？ - How i can make it work my filter on a .map with react native?
如何在react-native中创建一个圆形滑块 - How to make a circular slider in react-native
如何在本机反应中将本机视图捕获到视频 - How can I capture native view to video in react native
如何在 react-native-snap-carousel 中使轮播循环？ - how to make carousel circular in react-native-snap-carousel?
React Native Card Carousel 视图？ - React Native Card Carousel view?
如何使我的应用程序响应所有手机？ 反应本机 - How can I do to make my app responsive to all phones? REACT-NATIVE
我如何使本机视图在滚动时保持粘性 - How do i make a react native View sticky on scroll
如何让我的 React Native 应用程序进入“fetch”方法？ - How can I make my React Native app go into the "fetch" method?
如何在react-native中实现刮刮卡/视图？ - How to implement a scratch card / view in react-native?
相关标签