Question

如何创建包含文本或字符的圆形按钮。它应该如下所示：它应该如下所示，图片如下：

到目前为止，我做到了这一点，但事实并非如此：

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

创建一个始终为方形的button，而不是添加border-radius: 50; 我建议您使用min-width / width或padding。 您无需添加height ;

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>

Answer 2

class UserData
{
    const INDEX = 1;
    const STREET = 2;

    static public $_address_fields = array(
        self::INDEX,
        self::STREET 
    );
}

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

2 个答案: