React Native: идеально выровнять текст по кругу - PullRequest
Новая
       9

React Native: идеально выровнять текст по кругу

0 голосов
/ 28 апреля 2018

У меня есть круговая кнопка (сделанная с borderRadius) в React Native. Текст в компоненте должен быть центрирован как вертикально, так и горизонтально.

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

        <View style = {{
          alignItems:'center', 
          justifyContent:'center',  
          backgroundColor:'yellow', 
          borderColor: this.props.color,    
          width:size,   height:size, 
          borderRadius:size, 
          borderWidth:borderWidth,
        }}>
            <Text style = {{
              textAlign: 'center',  
              backgroundColor:'none', 
              fontSize:fontSize, 
              lineHeight:fontSize,
            }}>
              {this.props.title}
            </Text>
        </View>

Хотя уже ответили в другом месте , я не могу правильно центрировать текст (в данном случае) по кругу.

The + is not centeredGreen background show it better

Как видно на изображении с зеленым фоном <Text> -компонента, текст просто не идеально отцентрирован. Даже если сам по себе идеально выровнен ...

Вот закуска для Экспо с целым кодом, уменьшенным до необходимого и с различными размерами примера: https://repl.it/@PaulHuchner/Centered-Text-in-Circles

1 Ответ

0 голосов
/ 28 апреля 2018

Вы пытаетесь установить те же fontSize и lineHeight, что и диаметр круга, к которому добавлено borderWidth из 10.

Из-за borderWidth текст обрезается и накладывается поверх круга. Значение lineHeight, назначенное для вырезки Text, превышает требуемое, поэтому отображается misaligned.

Поэтому вам нужно уменьшить fontSize и lineHeight на основе borderRadius круга, чтобы правильно функционировать для всех измерений. 

<Text style = {{
     textAlign: 'center',
     backgroundColor:'green',
     fontSize:fontSize - 2 * borderWidth, //... One for top and one for bottom alignment
     lineHeight:fontSize - (Platform.OS === 'ios' ? 2 * borderWidth : borderWidth), //... One for top and one for bottom alignment
   }}>

Вот закуска ссылка

...