如何创建带有文本或字符的圆形按钮。它应该是这样的: 它应该是这样的,下图:
到目前为止,我做了这个,但它不是那么圆:
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)