javascript - multiple - react native styles cheat sheet

Reaccionar radio de borde nativo con color de fondo

Question

En React Native, borderRadius funciona, pero el color de fondo dado al botón permanece 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''
},
...

Answer 1

Aplique 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"
/>

Answer 2

Debe agregar overflow: hidden a sus estilos:

Js:

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

Estilos:

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

Answer 3

Intente mover el estilo del botón al TouchableHighlight sí:

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 (igual):

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