Reaccionar el radio del borde nativo con el color de fondo

96

En React Native, borderRadius está funcionando, pero el color de fondo que se le da al botón sigue siendo un cuadrado. ¿Que esta pasando 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'
},
...

javascript styles react-native

— Chipe
fuente

sólo una suposición, trate de darle borderStyle: 'solid'a lasubmitText

— Cherniv

No, eso no funcionó desafortunadamente

— Chipe

¿en qué entorno estás probando? ios o android?

— Cherniv

155

Intente mover el estilo del botón al TouchableHighlightmismo:

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ón (mismo):

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

— Nader Dabit
fuente

2

¡Gracias! la paddingtambién otra clave importante.

— DazChong

73

Debes agregar overflow: hiddena tus estilos:

Js:

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

Estilos:

submit {
   backgroundColor: '#68a0cf';
   overflow: 'hidden';
}

— Hossein
fuente

3

overflow: 'hidden'funcionó para mí incluso sin react-native-button

— Evan Siroky

2

Gracias. Sí, poner backgroundColory borderRadiusen el recipiente, luego agregar overflow: 'hidden'al recipiente funcionó para mí. (Tampoco se usa react-native-button)

— David

2

¡esto es lo que quería! (no el marcado)

— Julien Malige

1

Nunca le dé borderRadius a su <Text />siempre envuelva eso <Text />dentro de su <View />o en su<TouchableOpacity/> .

borderRadius on <Text />funcionará perfectamente en dispositivos Android. Pero en los dispositivos IOS no funcionará.

Así que tenga esto en su práctica para envolver su <Text/>interior de su <View/>o en <TouchableOpacity/>y después dar el borderRadius a que <View />o<TouchableOpacity /> por lo que va a trabajar tanto en Android, así como en los dispositivos IOS.

Por ejemplo:-

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

-Gracias

— mukul soni
fuente

0

Aplicar la siguiente línea de código:

<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
fuente