Радиус границы не работает с кнопкой

Я хочу создать кнопку радиуса границы с помощью touchableOpacity.

Я пробовал такой стиль:

whiteButton : {
    borderWidth:1,
    overflow : "hidden",
    marginTop: "3%",
    backgroundColor:"white",
    width:"80%",height:"6%",
    borderRadius : 20,
    borderColor:"white",
    marginBottom:10
}

Но кнопка выглядит так:

Только белая часть

А если убрать переполнение: «скрыто», это будет выглядеть так:

У тебя есть идея?

РЕДАКТИРОВАТЬ :

После установки backgroundColor текста на прозрачный, у меня тот же результат, что и overflow: "hidden", но с текстом чуть ниже. Это похоже на то, что мой текст выходит за пределы touchableopacity.

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


react-native react-native-ios button touchableopacity
person Psyycker    schedule 23.11.2017    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Из реакции нативный материальный дизайн,

Компонент кнопки отображает кнопку, доступную для прикосновения, и занимает всю ширину ее родительского контейнера.

Занимает всю ширину своего родителя, что означает добавление отступов на TouchableOpacity работает. (что whiteButton вашего стиля)

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

Для меня padding: 2 достаточно borderRadius: 10.

person Val    schedule 23.11.2017

arrow_upward
0
arrow_downward

Поскольку ваш текст внутри кнопки растягивается до границ кнопки, следовательно, радиус границы не применяется. Вам необходимо увеличить размер кнопки или уменьшить размер текста, чтобы на границах оставалось пространство, позволяющее реализовать радиус границы. Кроме того, вам необходимо убедиться, что текст находится по центру (используйте justifyContent и alignItems) внутри кнопки, чтобы он не касался границ кнопки.

person Shubhnik Singh    schedule 23.11.2017

arrow_upward
0
arrow_downward

Хорошо, проблема была в моем коде. Я не видел, но я добавил представление, и в моем представлении было обернуто touchableopacity.

До :

<View>
      <TouchableOpacity onPress={() => {this.sendLoginData()}} style={styles.whiteButton}>
         <Text style={{textAlign:"center", fontSize:25, color:"#3b88c3", backgroundColor: 'rgba(0,0,0,0)'}}>S'IDENTIFIER</Text>
      </TouchableOpacity>
</View>

Афер:

<TouchableOpacity onPress={() => {this.sendLoginData()}} style={styles.whiteButton}>
     <Text style={{textAlign:"center", fontSize:25, color:"#3b88c3", backgroundColor: 'rgba(0,0,0,0)'}}>S'IDENTIFIER</Text>
</TouchableOpacity>
person Psyycker    schedule 23.11.2017