убрать контур кнопки native-base - PullRequest
Новая
       44

убрать контур кнопки native-base

2 голосов
/ 03 августа 2020

Я пытаюсь обернуть иконку кнопкой. Вот так: 

            <Button
              style={styles.radioButton}
              onPress={() => {
                console.log('hdjwk');
              }}>
              <Icon
                style={styles.icon}
                name="circle-thin"
                color="#31C283"
                size={moderateScale(20)}
              />
            </Button>

...
  radioButton: {
    backgroundColor: 'white',
    borderRadius: 0,
    borderColor: 'white',
  },
  icon: {
    paddingTop: moderateScale(12),
  },

Однако, когда я оборачиваю свой значок кнопкой, значок сдвигается вниз, и начинает появляться контур, даже если я установил для borderRadius значение 0. Как я могу это исправить, например что он выглядит естественно и нет различия между фоновым экраном и значком?

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

Ответы [ 3 ]

2 голосов
/ 03 августа 2020

ваши стили кнопок довольно хороши, я бы посоветовал вот что: 

backgroundColor: 'white',
borderRadius: 0,
borderColor: 'transparent', //will make the colour fully opaque, but you could get an even better effect with 'border: none'

Я заметил, что на вашей кнопке есть свойство box-shadow, и это, скорее всего, создает границу. поэтому вам нужно установить свою кнопку css как 'box-shadow: none'.

Так что выровняйте свой значок по центру, вам также нужно будет настроить свой дисплей как гибкий, а затем центрировать контент . Таким образом, окончательные версии кнопок должны выглядеть так (plain css) 

{
  background-color: white, // could be transparent if you want it to be the same colour as 
the parent background
  border: none //to remove any border properties
  box-shadow: none

  display: flex;
  justify-content: center;
  align-items: center; 


  //NOTE: you might need to set up a width and height for the flex to take effect
}

{
   backgroundColor: 'white' 
   //or backgroundColor: 'transparent'
   borderRadius: 0,
   borderColor: 'white',
   elevation: 0,

   flex : 1,
   flexDirection: "column",
   justifyContent: 'center',
   alignItems: 'center'
}

прочтите, как удалить тени или просто использовать высоту: 0

0 голосов
/ 03 августа 2020

Я хотел бы предложить вам использовать TouchableOpacity вместо Button. Так что вы можете легко сделать вот так 

          <TouchableOpacity
              style={styles.radioButton}
              onPress={() => {
                console.log('hdjwk');}}
           >
              <Icon
                style={styles.icon}
                name="circle-thin"
                color="#31C283"
                size={moderateScale(20)}
              />
           </TouchableOpacity>

...
  radioButton: {
    backgroundColor: 'white',
    borderRadius: 0,
    borderColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
0 голосов
/ 03 августа 2020

Может быть, попробовать обернуть иконку и текст внутри TouchableOpacity? Или даже просто значок, который вы можете обернуть в TouchableOpacitiy, а затем вы можете щелкнуть его и установить onPress Funktions, как если бы вы сделали это для кнопки.

Ссылка: https://reactnative.dev/docs/touchableopacity#docsNav

Вы также можете попробовать другие Touchable Wrappers, которые предоставляет React Native.

...