使用 React Native 的 Android 和 iOS 的关闭按钮圆形图标答案

【问题标题】：Close button round icon for Android and iOS using React Native使用 React Native 的 Android 和 iOS 的关闭按钮圆形图标
【发布时间】：2020-04-12 14:38:04
【问题描述】：

我正在尝试创建一个带有可点击操作的关闭按钮。在这里，我需要设计圆形关闭按钮图标并将其放置在视图的右上角。如何使用react-native 实现这一点？

enter image description here

【问题讨论】：

您应该在问题中显示您的代码。修复更改比为您编写完整代码更容易。
@AbhishekKumawat 我是新手。我想知道一些示例。对不起。
我知道。我不是生你的气，我只是告诉你。如果你已经知道css，我可以帮助你。
@AbhishekKumawat 我需要知道将 JavaScript 与 react-native 结合使用
Here 是你的例子

标签： javascript typescript react-native

【解决方案1】：

就是这样，但您需要先安装：react-native-vector-icons，按照此处的说明进行操作：https://github.com/oblador/react-native-vector-icons

import React from 'react';
import {TouchableOpacity,StyleSheet} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

const BUTTON_SIZE = 30
const BORDER_WIDTH = 1

function CloseButton(props:any){
    return (
        <TouchableOpacity onPress={props.onPress} style={[styles.button,{backgroundColor:'white',borderColor:props.color}]}>
            <Icon name={'close'} color={props.color} size={BUTTON_SIZE/2} />
        </TouchableOpacity>

    )
}
const styles = StyleSheet.create({
    button:{
        justifyContent:'center',
        alignItems:'center',
        width:BUTTON_SIZE+BORDER_WIDTH,
        height:BUTTON_SIZE+BORDER_WIDTH,
        borderWidth:BORDER_WIDTH,
        borderRadius:BUTTON_SIZE/2,
    }
})
export default CloseButton;

我希望我的解决方案是您正在寻找的，如果您还有其他问题，请不要犹豫。抱歉耽搁了！ :D

【讨论】：

【解决方案2】：

您必须使用 TouchableOpacity 和 Icon 创建它，如果您需要我为您编写代码，请告诉我。

【讨论】：

您能举个例子吗？

【解决方案3】：

你正在寻找那个，不是吗？

import React, { FC } from 'react'
import styled from 'styled-components'
import { Icon } from 'react-native-elements'

const ICON_SIZE = 30
const BORDER_SIZE = 2

const App: FC = () => {
  return (
    <Container>
      <CloseButton
        onPress={() => {
          alert('magic stuff is happening!')
        }}
      >
        <Icon name={'close'} size={ICON_SIZE} color={'black'} />
      </CloseButton>
    </Container>
  )
}

export default App

const Container = styled.View`
  padding: 10px;
  background-color: palevioletred;
  height: 100%;
  width: 100%;
  flex-direction: row;
  justify-content: flex-end;
`
const CloseButton = styled.TouchableOpacity`
  background-color: white;
  width: ${ICON_SIZE + BORDER_SIZE}px;
  height: ${ICON_SIZE + BORDER_SIZE}px;
  border-radius: ${(ICON_SIZE + BORDER_SIZE) / 2}px;
  border-width: ${BORDER_SIZE}px;
`

【讨论】：