Reaja o raio da borda nativa com a cor de fundo

94

Em React Native, borderRadius está funcionando, mas a cor de fundo dada ao botão permanece quadrada. O que está acontecendo aqui?

JS

<TouchableHighlight
  style={styles.submit}
  onPress={() => this.submitSuggestion(this.props)}
  underlayColor='#fff'>
    <Text style={[this.getFontSize(),styles.submitText]}>Submit</Text>
</TouchableHighlight>

Estilo

...
submit:{
    marginRight:40,
    marginLeft:40,
    marginTop:10,
},
submitText:{
    paddingTop:20,
    paddingBottom:20,
    color:'#fff',
    textAlign:'center',
    backgroundColor:'#68a0cf',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#fff'
},
...

insira a descrição da imagem aqui

Chipe
fonte
apenas um palpite, tente dar borderStyle: 'solid'aosubmitText
Cherniv
Não, isso não funcionou, infelizmente
Chipe
em qual ambiente você está testando? iOS ou android?
Cherniv
veja este exemplo: React Native Border Radius com a cor de fundo Exemplo
sumit kumar pradhan

Respostas:

154

Experimente mover o estilo do botão para o TouchableHighlightpróprio:

Estilos:

  submit:{
    marginRight:40,
    marginLeft:40,
    marginTop:10,
    paddingTop:20,
    paddingBottom:20,
    backgroundColor:'#68a0cf',
    borderRadius:10,
    borderWidth: 1,
    borderColor: '#fff'
  },
  submitText:{
      color:'#fff',
      textAlign:'center',
  }

Botão (mesmo):

<TouchableHighlight
  style={styles.submit}
  onPress={() => this.submitSuggestion(this.props)}
  underlayColor='#fff'>
    <Text style={[this.getFontSize(),styles.submitText]}>Submit</Text>
</TouchableHighlight>

insira a descrição da imagem aqui

Nader Dabit
fonte
2
Obrigado! a paddingtambém outra chave importante.
DazChong
veja este exemplo: React Native Border Radius com a cor de fundo Exemplo
sumit kumar pradhan
71

Você deve adicionar overflow: hidden aos seus estilos:

Js:

<Button style={styles.submit}>Submit</Button>

Estilos:

submit {
   backgroundColor: '#68a0cf';
   overflow: 'hidden';
}
Hossein
fonte
3
overflow: 'hidden'funcionou para mim mesmo sem reagir-nativo-botão
Evan Siroky
2
Obrigado. Sim, colocar backgroundColore borderRadiusno contêiner e adicionar overflow: 'hidden'ao contêiner funcionou para mim. (Também não está usando react-native-button.)
David,
2
isso é o que eu queria! (não marcado)
Julien Malige
1

Nunca dê borderRadius para seu <Text />sempre embrulhar <Text />dentro de seu <View />ou em seu <TouchableOpacity/>.

borderRadius ligado <Text />funcionará perfeitamente em dispositivos Android. Mas em dispositivos IOS não funcionará.

Portanto, mantenha isso em sua prática para embrulhar seu <Text/>interior <View/>ou sobre <TouchableOpacity/>e, em seguida, dar o borderRadius a isso <View />ou <TouchableOpacity /> para que funcione em dispositivos Android e IOS.

Por exemplo:-

<TouchableOpacity style={{borderRadius: 15}}>
   <Text>Button Text</Text>
</TouchableOpacity>

-Obrigado

mukul soni
fonte
0

Aplique a linha de código abaixo:

<TextInput
  style={{ height: 40, width: "95%", borderColor: 'gray', borderWidth: 2, borderRadius: 20,  marginBottom: 20, fontSize: 18, backgroundColor: '#68a0cf' }}
  // Adding hint in TextInput using Placeholder option.
  placeholder=" Enter Your First Name"
  // Making the Under line Transparent.
  underlineColorAndroid="transparent"
/>
sumit kumar pradhan
fonte