So erstellen Sie runde Schaltfläche mit Text im Inneren

Question

So erstellen Sie runde Schaltfläche mit Text oder Char innerhalb. Es soll wie folgt aussehen: Es sollte so aussehen, Bild unten:

img example

Bisher habe ich das, aber es ist nicht so rund:

import React, { Component } from 'react'; 
import { View, StyleSheet, TouchableOpacity } from 'react-native'; 
import { Constants } from 'expo'; 
import Icon from 'react-native-vector-icons/FontAwesome'; // 4.4.2 

export default class App extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <TouchableOpacity onPress={() => null}> 
       <Icon 
        name="chevron-left" 
        icon={{ name: 'rss', type: 'font-awesome' }} 
        style={styles.button} 
        size={25} 
       /> 
       </TouchableOpacity> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    paddingTop: Constants.statusBarHeight, 
    backgroundColor: '#ecf0f1', 
    }, 
    button: { 
    padding: 25, 
    backgroundColor: 'black', 
    color: 'white', 
    borderRadius: 50, 
    }, 
}); 

Answer 1

<TouchableOpacity 
    style={{ borderWidth:1, 
    borderColor:'rgba(0,0,0,0.2)', 
    alignItems:'center', 
    justifyContent:'center', 
    width:100, 
    height:100, 
    backgroundColor:'#fff', 
    borderRadius:100, 
    }} 
    > 
    <Icon name={"chevron-right"} 
    size={30} 
    color="#01a699" /> 
</TouchableOpacity> 

Answer 2

ein button erstellen, das Quadrat ist die ganze Zeit, als hinzufügen border-radius: 50; Ich schlage vor, Sie gehen mit einigen min-width/width oder padding darauf. Sie müssen height nicht hinzufügen;

button { 
 
    background: red; 
 
    border: 0; 
 
    border-radius: 50%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    padding: 0; 
 
} 
 

 
button::after { 
 
    content: ""; 
 
    display: block; 
 
    padding-bottom: 100%; 
 
}

<button>test</button>