Пользовательский круг относительно длины контента в реагирующем

Question

Я хочу нарисовать круг по отношению к внутренней длине контента. Я пытался использовать height:100, width:100, borderRadius:50, но при увеличении контента он статичен и выглядит неудобно. Я гуглил, но это дает мне то же самое решение.

Требуемый выход https://i.stack.imgur.com/lvRu9.png

Мой вывод https://i.stack.imgur.com/1VcOv.png

Любая помощь приветствуется. Спасибо.

Answer 1

Не дают статической ширины и высоты .

Передайте реквизит onLayoutChange вашему View, обратный вызов даст вам высоту и ширину вашего представления, прежде чем он изменится.

Затем вы можете использовать ширину или высоту для расчета радиуса границы в соответствии с вашими требованиями.

Но я бы предложил использовать статическую высоту, а не проходить ширина, и дать радиус границы, равный половине высоты, это будет помочь вам достичь желаемой цели

Answer 2

Вы можете достичь этого с помощью 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>

Answer 3

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>