Reagisce Native Border Radius con il colore di sfondo

96

In React Native, borderRadiusfunziona ma il colore di sfondo dato al pulsante rimane un quadrato. Che cosa sta succedendo qui?

JS

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

Stile

...
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
fonte

solo una supposizione, prova a dare borderStyle: 'solid'asubmitText

— Cherniv

No, sfortunatamente non ha funzionato

— Chipe

su quale ambiente stai testando? iOS o Android?

— Cherniv,

155

Prova a spostare lo stile dei pulsanti sullo TouchableHighlightstesso:

Stili:

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

Pulsante (stesso):

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

— Nader Dabit
fonte

2

Grazie! la paddinganche un'altra chiave importante.

— DazChong

73

Dovresti aggiungere overflow: hiddenai tuoi stili:

Js:

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

Stili:

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

— Hossein
fonte

3

overflow: 'hidden'ha funzionato per me anche senza il pulsante di reazione nativa

— Evan Siroky

2

Grazie. Sì, mettere backgroundColore borderRadiussul contenitore, quindi aggiungere overflow: 'hidden'al contenitore ha funzionato per me. (Anche non in uso react-native-button.)

— David

2

questo è quello che volevo! (non quella spuntata)

— Julien Malige

1

Non dare mai borderRadius al tuo avvolgilo <Text />sempre <Text />dentro <View />o nel tuo <TouchableOpacity/>.

borderRadius su <Text />funzionerà perfettamente sui dispositivi Android. Ma sui dispositivi IOS non funzionerà.

Quindi tienilo nella tua pratica per avvolgere il tuo <Text/>dentro <View/>o sopra <TouchableOpacity/>e poi dai il borderRadius a quello <View />o in <TouchableOpacity /> modo che funzioni sia su Android che su dispositivi IOS.

Per esempio:-

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

-Grazie

— mukul soni
fonte

0

Applica la seguente riga di codice:

<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