Круглый значок кнопки закрытия для Android и iOS с использованием React Native

Question

Я пытаюсь создать кнопку закрытия с кликабельным действием. здесь мне нужно создать круглый значок кнопки закрытия и поместить его в верхний правый угол в представлении. Как этого добиться, используя react-native?

введите описание изображения здесь

Answer 1

Это все, но вам нужно сначала установить: Reaction-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

Answer 2

вы ищете это, не так ли?

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;
`

Answer 3

Вы должны создать его, используя TouchableOpacity и Icon. Дайте мне знать, если вам нужно, чтобы я написал вам код.