如何创建带有文本的圆形按钮

per*_*nja 4 css react-native

如何创建带有文本或字符的圆形按钮。它应该是这样的: 它应该是这样的,下图:

图片示例

到目前为止,我做了这个,但它不是那么圆:

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,
  },
});
Run Code Online (Sandbox Code Playgroud)

小智 5

<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>
Run Code Online (Sandbox Code Playgroud)