如何在本机反应中使我的卡视图小圆形

Question

//

在下面的代码中，我试图根据我的 ux 设计在 ui 上制作。但是我面临的一个问题是无法在 ux 中制作类似的卡片，在 ux 中它的某些循环，但在我的代码中它没有出现。它也尝试使用边界半径。请提出我错在哪里

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

Answer 1

你应该试试这个：

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

Answer 2

关于你的另一个问题：

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