javascript - multiple - react native styles cheat sheet
Reaccionar radio de borde nativo con color de fondo (3)
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"
/>
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''
},
...
Debe agregar
overflow: hidden
a sus estilos:
Js:
<Button style={styles.submit}>Submit</Button>
Estilos:
submit {
backgroundColor: ''#68a0cf'';
overflow: ''hidden'';
}
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>