2020年1月6日 14:52:28go评论87阅读模式

英文:

How can I make my card view littile circular in react native

问题

在下面的代码中，我试图根据我的用户体验设计创建一个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 key={index}>
                            <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>

左侧是UX，右侧是我正在做的事情。

英文:

//

In below code I am trying to make on ui according to my ux design . 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. It tried with border radius also . Please suggest where I am wrong

 &lt;View style={{ marginBottom: 10, marginLeft: 5, marginRight: 5, borderRadius: 2, padding: 10 }} &gt;
&lt;Card &gt;
&lt;CardItem header style={{ flexDirection: &#39;row&#39;, backgroundColor: &#39;#fff&#39;, width: &#39;100%&#39;, justifyContent: &#39;space-between&#39;, borderBottomColor: &#39;#f1f1f1&#39;, borderBottomWidth: 1,borderRadius: 80 }}&gt;
&lt;View style={{paddingTop:10 }}&gt;
&lt;RegularText text={`${&#39;Wallet Balance&#39;}`} textColor=&#39;grey&#39;style={{ fontWeight: &#39;bold&#39;, flexWrap: &#39;wrap&#39;,color:&#39;grey&#39; }} /&gt;
&lt;/View&gt;
&lt;View style = {{ width : wp(&#39;10%&#39;),height: wp(&#39;10%&#39;),backgroundColor : &#39;#E091C9&#39; ,borderRadius : hp(&#39;1%&#39;), margin : 8,flexDirection :&#39;row&#39;,justifyContent :&#39;center&#39;,alignItems : &#39;center&#39;}}&gt;
&lt;SvgCss xml={WALLET} width={15} height={15} /&gt;
&lt;/View&gt;
&lt;View style={{
flexDirection: &#39;column&#39;,
height: 25, paddingRight: 10, paddingLeft: 10, paddingTop: 5,paddingBottom:30}}&gt;
&lt;SmallText text={&#39;MUR 110.00&#39;} textColor=&#39;red&#39; /&gt;
&lt;SmallText text={&#39;Add Money&#39;} textColor=&#39;blue&#39; /&gt;
&lt;/View&gt;
&lt;/CardItem&gt;
&lt;View style = {{flexDirection : &#39;row&#39;,paddingLeft:24,paddingRight:24}}&gt;
{info.tecnologies.map(
(data, index) =&gt; {
return (
&lt;View&gt;
&lt;View style = {{width : wp(&#39;14%&#39;),height: wp(&#39;14%&#39;),backgroundColor : &#39;rgb(163, 153, 233)&#39;,borderRadius : hp(&#39;2%&#39;), margin : 10,flexDirection :&#39;row&#39;,justifyContent :&#39;center&#39;,alignItems : &#39;center&#39;}}&gt;
&lt;SvgCss xml={PAY_BILL} width={15} height={15} /&gt;
&lt;/View&gt;
&lt;View style={{paddingLeft:15,paddingBottom:15}}&gt;
&lt;SmallText text={&#39;Pay Bill&#39;} textColor=&#39;grey&#39; /&gt;
&lt;/View&gt;
&lt;/View&gt;
)
}
)}
&lt;/View&gt;
&lt;/Card&gt;
&lt;/View&gt;

答案1

得分: 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={`${'钱包余额'}`} 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={'添加金额'} 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={'支付账单'} textColor='grey' />
              </View>
            </View>
          )
        }
      )}
    </View>
  </Card>
</View>

如果您需要任何进一步的翻译或帮助，请告诉我。

英文:

You should try this :

&lt;View style={{ marginBottom: 10, marginLeft: 5, marginRight: 5, borderRadius: 2, padding: 10 }} &gt;
&lt;Card style={{ borderRadius: 8 }}&gt;
&lt;CardItem header style={{ flexDirection: &#39;row&#39;, backgroundColor: &#39;#fff&#39;, width: &#39;100%&#39;, justifyContent: &#39;space-between&#39;, borderBottomColor: &#39;#f1f1f1&#39;, borderBottomWidth: 1,borderRadius: 80 }}&gt;
&lt;View style={{paddingTop:10 }}&gt;
&lt;RegularText text={`${&#39;Wallet Balance&#39;}`} textColor=&#39;grey&#39;style={{ fontWeight: &#39;bold&#39;, flexWrap: &#39;wrap&#39;,color:&#39;grey&#39; }} /&gt;
&lt;/View&gt;
&lt;View style = {{ width : wp(&#39;10%&#39;),height: wp(&#39;10%&#39;),backgroundColor : &#39;#E091C9&#39; ,borderRadius : hp(&#39;1%&#39;), margin : 8,flexDirection :&#39;row&#39;,justifyContent :&#39;center&#39;,alignItems : &#39;center&#39;}}&gt;
&lt;SvgCss xml={WALLET} width={15} height={15} /&gt;
&lt;/View&gt;
&lt;View style={{
flexDirection: &#39;column&#39;,
height: 25, paddingRight: 10, paddingLeft: 10, paddingTop: 5,paddingBottom:30}}&gt;
&lt;SmallText text={&#39;MUR 110.00&#39;} textColor=&#39;red&#39; /&gt;
&lt;SmallText text={&#39;Add Money&#39;} textColor=&#39;blue&#39; /&gt;
&lt;/View&gt;
&lt;/CardItem&gt;
&lt;View style = {{flexDirection : &#39;row&#39;,paddingLeft:24,paddingRight:24}}&gt;
{info.tecnologies.map(
(data, index) =&gt; {
return (
&lt;View&gt;
&lt;View style = {{width : wp(&#39;14%&#39;),height: wp(&#39;14%&#39;),backgroundColor : &#39;rgb(163, 153, 233)&#39;,borderRadius : hp(&#39;2%&#39;), margin : 10,flexDirection :&#39;row&#39;,justifyContent :&#39;center&#39;,alignItems : &#39;center&#39;}}&gt;
&lt;SvgCss xml={PAY_BILL} width={15} height={15} /&gt;
&lt;/View&gt;
&lt;View style={{paddingLeft:15,paddingBottom:15}}&gt;
&lt;SmallText text={&#39;Pay Bill&#39;} textColor=&#39;grey&#39; /&gt;
&lt;/View&gt;
&lt;/View&gt;
)
}
)}
&lt;/View&gt;
&lt;/Card&gt;
&lt;/View&gt;

答案2

得分: 1

以下是代码部分的翻译：

&lt;View style={{ marginBottom: 10, marginLeft: 5, marginRight: 5, borderRadius: 2, padding: 10 }} &gt;
  &lt;Card style={{ borderRadius: 8 }}&gt;
    &lt;CardItem header style={{ flexDirection: &#39;row&#39;, backgroundColor: &#39;#fff&#39;, width: &#39;100%&#39;, justifyContent: &#39;space-between&#39;, borderBottomColor: &#39;#f1f1f1&#39;, borderBottomWidth: 1,borderRadius: 80 }}&gt;
      &lt;View style={{paddingTop:10 }}&gt;
          &lt;RegularText text={`${&#39;Wallet Balance&#39;}`} textColor=&#39;grey&#39;style={{ fontWeight: &#39;bold&#39;, flexWrap: &#39;wrap&#39;,color:&#39;grey&#39; }} /&gt;
      &lt;/View&gt;

      &lt;View style = {{ width : wp(&#39;10%&#39;),height: wp(&#39;10%&#39;),backgroundColor : &#39;#E091C9&#39; ,borderRadius : hp(&#39;1%&#39;), margin : 8,flexDirection :&#39;row&#39;,justifyContent :&#39;center&#39;,alignItems : &#39;center&#39;, alignSelf : &#39;flex-end&#39;}}&gt;
      &lt;SvgCss xml={WALLET} width={15} height={15} /&gt;

      &lt;View style={{
          flexDirection: &#39;column&#39;,
          height: 25, paddingRight: 10, paddingLeft: 10, paddingTop: 5,paddingBottom:30}}&gt;
          &lt;SmallText text={&#39;MUR 110.00&#39;} textColor=&#39;red&#39; /&gt;
          &lt;SmallText text={&#39;Add Money&#39;} textColor=&#39;blue&#39; /&gt;
      &lt;/View&gt;
      &lt;/View&gt;
    &lt;/CardItem&gt;
    &lt;View style = {{flexDirection : &#39;row&#39;,paddingLeft:24,paddingRight:24}}&gt;
    {info.tecnologies.map(
      (data, index) =&gt; {
          return (
            &lt;View&gt;
              &lt;View style = {{width : wp(&#39;14%&#39;),height: wp(&#39;14%&#39;),backgroundColor : &#39;rgb(163, 153, 233)&#39;,borderRadius : hp(&#39;2%&#39;), margin : 10,flexDirection :&#39;row&#39;,justifyContent :&#39;center&#39;,alignItems : &#39;center&#39;}}&gt;
            &lt;SvgCss xml={PAY_BILL} width={15} height={15} /&gt;
              &lt;/View&gt;
              &lt;View style={{paddingLeft:15,paddingBottom:15}}&gt;
              &lt;SmallText text={&#39;Pay Bill&#39;} textColor=&#39;grey&#39; /&gt;

              &lt;/View&gt;
            &lt;/View&gt;
          )
      }
  )}
  &lt;/View&gt;
  &lt;/Card&gt;
&lt;/View&gt;

请注意，这只是代码部分的翻译，不包括代码中的注释或其他非代码的内容。如果您需要进一步的帮助或有其他问题，请随时提出。

英文:

For your another question :

&lt;View style={{ marginBottom: 10, marginLeft: 5, marginRight: 5, borderRadius: 2, padding: 10 }} &gt;
&lt;Card style={{ borderRadius: 8 }}&gt;
&lt;CardItem header style={{ flexDirection: &#39;row&#39;, backgroundColor: &#39;#fff&#39;, width: &#39;100%&#39;, justifyContent: &#39;space-between&#39;, borderBottomColor: &#39;#f1f1f1&#39;, borderBottomWidth: 1,borderRadius: 80 }}&gt;
&lt;View style={{paddingTop:10 }}&gt;
&lt;RegularText text={`${&#39;Wallet Balance&#39;}`} textColor=&#39;grey&#39;style={{ fontWeight: &#39;bold&#39;, flexWrap: &#39;wrap&#39;,color:&#39;grey&#39; }} /&gt;
&lt;/View&gt;
&lt;View style = {{ width : wp(&#39;10%&#39;),height: wp(&#39;10%&#39;),backgroundColor : &#39;#E091C9&#39; ,borderRadius : hp(&#39;1%&#39;), margin : 8,flexDirection :&#39;row&#39;,justifyContent :&#39;center&#39;,alignItems : &#39;center&#39;, alignSelf : &#39;flex-end&#39;}}&gt;
&lt;SvgCss xml={WALLET} width={15} height={15} /&gt;
&lt;View style={{
flexDirection: &#39;column&#39;,
height: 25, paddingRight: 10, paddingLeft: 10, paddingTop: 5,paddingBottom:30}}&gt;
&lt;SmallText text={&#39;MUR 110.00&#39;} textColor=&#39;red&#39; /&gt;
&lt;SmallText text={&#39;Add Money&#39;} textColor=&#39;blue&#39; /&gt;
&lt;/View&gt;
&lt;/View&gt;
&lt;/CardItem&gt;
&lt;View style = {{flexDirection : &#39;row&#39;,paddingLeft:24,paddingRight:24}}&gt;
{info.tecnologies.map(
(data, index) =&gt; {
return (
&lt;View&gt;
&lt;View style = {{width : wp(&#39;14%&#39;),height: wp(&#39;14%&#39;),backgroundColor : &#39;rgb(163, 153, 233)&#39;,borderRadius : hp(&#39;2%&#39;), margin : 10,flexDirection :&#39;row&#39;,justifyContent :&#39;center&#39;,alignItems : &#39;center&#39;}}&gt;
&lt;SvgCss xml={PAY_BILL} width={15} height={15} /&gt;
&lt;/View&gt;
&lt;View style={{paddingLeft:15,paddingBottom:15}}&gt;
&lt;SmallText text={&#39;Pay Bill&#39;} textColor=&#39;grey&#39; /&gt;
&lt;/View&gt;
&lt;/View&gt;
)
}
)}
&lt;/View&gt;
&lt;/Card&gt;
&lt;/View&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何使我的卡片视图在React Native中变成小圆形？

问题

答案1

答案2

预期无限重新渲染，但没有发生。

如何将值从JS传递给闪电网络组件中的HTML标记？

ExtJS GridPanel点击整行

Ag-Grid 行分组渲染错误

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论