Réagir le rayon de bordure natif avec la couleur de fond

96

Dans React Native, borderRadiusfonctionne mais la couleur d'arrière-plan donnée au bouton reste un carré. Qu'est-ce qui se passe ici?

JS

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

Style

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

juste une supposition, essayez de donner borderStyle: 'solid'ausubmitText

— Cherniv

Non, cela n'a pas fonctionné malheureusement

— Chipe

sur quel environnement vous testez? iOS ou Android?

— Cherniv

155

Essayez de déplacer le style du bouton sur TouchableHighlightlui - même:

Modes:

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

Bouton (même):

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

— Nader Dabit
source

2

Merci! le paddingégalement une autre clé importante.

— DazChong

73

Vous devez ajouter overflow: hiddenà vos styles:

Js:

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

Modes:

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

— Hossein
source

3

overflow: 'hidden'a travaillé pour moi même sans bouton de réaction natif

— Evan Siroky

2

Merci. Oui, mettre le backgroundColoret borderRadiussur le conteneur, puis l'ajouter overflow: 'hidden'au conteneur a fonctionné pour moi. (N'utilise pas non plus react-native-button.)

— David

2

c'est ce que je voulais! (pas celui vérifié)

— Julien Malige

1

Ne donnez jamais borderRadius à votre <Text />enveloppez toujours cela <Text />dans votre <View />ou dans votre <TouchableOpacity/>.

borderRadius sur <Text />fonctionnera parfaitement sur les appareils Android. Mais sur les appareils IOS, cela ne fonctionnera pas.

Alors gardez cela dans votre pratique pour envelopper votre <Text/>intérieur de votre <View/>ou sur <TouchableOpacity/>, puis donnez le borderRadius à cela <View />ou <TouchableOpacity /> pour qu'il fonctionne à la fois sur Android et sur les appareils IOS.

Par exemple:-

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

-Merci

— mukul soni
source

0

Appliquez la ligne de code ci-dessous:

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