在 react-native 中根据内容长度自定义圆圈

Question

我想根据内部内容长度绘制自定义圆圈。我尝试使用 height:100、width:100、borderRadius:50，但是当内容增加时它是静态的，看起来会很不方便。我用谷歌搜索，但它给了我相同的解决方案。

需要输出 https://i.stack.imgur.com/lvRu9.png

我的输出https://i.stack.imgur.com/1VcOv.png

感谢任何帮助。谢谢。

Answer 1

Use This code    
<ul class="size-List">
         <li><a href="javascript:void(0)">S</a></li>
         <li><a href="javascript:void(0)">M</a></li>
         <li><a href="javascript:void(0)">L</a></li>
         <li><a href="javascript:void(0)">XL</a></li>
         <li><a href="javascript:void(0)">XXL</a></li>
       </ul>
    <style>
    .size-List{
        list-style:none;
    }
    .size-List li{
        display:inline-block;
    }
    .size-List li a{
        border:1px solid gray;
        width:45px;
        height:45px;
        color:gray;
        line-height:45px;
        text-align:center;
        display:block;
        border-radius:100%;
        text-decoration:none;
        font-size:16px;
    }
    </style>

Answer 2

不要给静态宽度和高度。

将一个名为 onLayoutChange 的属性传递给您的视图，回调将在视图更改之前为您提供视图的高度和宽度。

然后您可以根据需要使用宽度或高度来计算边框半径。

But my suggestion would be to use a static height and not to pass width, and give a border radius half of that of the height, this will help you achieve your required goal

Answer 3

您可以在 minWidth 和一点点 padding

的帮助下实现这一点

用动态内容试试这个

<View style={{height: 100, minWidth: 100, paddingLeft: 10, paddingRight: 10, borderRadius: 50, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center'}} >
    <Text>// Dynamic Text</Text>
</View>

在 react-native 中根据内容长度自定义圆圈

Custom circle respect to content length in react-native

reactjs

react-native

react-native-ios