无法在本机反应中创建圆形按钮

【问题标题】：Unable to create round shape button in react native无法在本机反应中创建圆形按钮
【发布时间】：2020-08-13 20:51:07
【问题描述】：

我想为我的应用创建圆形按钮，该按钮是基于 react native 构建的。我已经尝试了下面的代码，但它们都不适合我。

代码 sn-p 1：<Button title="+" rounded="true"/>

代码 sn-p 2：addButton: { width: 20, height: 20, borderRadius: 40 }

【问题讨论】：

react-native 按钮没有 style 属性。所以你必须使用TouchableOpacity 创建一个自定义按钮

标签： javascript android reactjs react-native mobile

【解决方案1】：

基本上，您必须对 Views 和 Touchables 进行样式设置，使其看起来像您想要的按钮。这是一个圆形按钮组件的示例：

import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

export default ({ title, onPress }) => <TouchableOpacity onPress={onPress} style={styles.button}>
  <Text style={styles.title}>{title}</Text>
</TouchableOpacity>

const styles = StyleSheet.create({
  button: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    color: 'white',
  }
})

【讨论】：