Reagiere auf den nativen Randradius mit der Hintergrundfarbe

94

In React Native, borderRadius aber die Hintergrundfarbe der Schaltfläche bleibt ein Quadrat. Was geht hier vor sich?

JS

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

Stil

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

Nur eine Vermutung, versuchen Sie, borderStyle: 'solid'demsubmitText

— Cherniv

Nein, das hat leider nicht funktioniert

— Chipe

In welcher Umgebung testen Sie? iOS oder Android?

— Cherniv

— Schauen Sie

154

Versuchen Sie, das Tasten-Styling auf das zu verschieben TouchableHighlight selbst zu verschieben:

Stile:

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

Taste (gleich):

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

— Nader Dabit
quelle

2

Vielen Dank! das ist paddingauch ein weiterer wichtiger Schlüssel.

— DazChong

— Schauen Sie

71

Sie sollten hinzufügen overflow: hidden Ihren Stilen :

Js:

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

Stile:

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

— Hossein
quelle

3

overflow: 'hidden'arbeitete für mich auch ohne

— React

2

Vielen Dank. Ja, das Aufsetzen des backgroundColorund borderRadiusauf den Container und das Hinzufügen overflow: 'hidden'zum Container hat für mich funktioniert. (Auch nicht verwenden react-native-button.)

— David

2

das wollte ich! (nicht der geprüfte)

— Julien Malige

1

Geben Sie niemals borderRadius, um das <Text />immer <Text />in Ihr <View />oder in Ihr zu wickeln<TouchableOpacity/> .

borderRadius on <Text />funktioniert perfekt auf Android-Geräten. Aber auf iOS-Geräten funktioniert es nicht.

Behalten Sie dies also in Ihrer Praxis bei, um Ihr <Text/>Inneres in Ihr <View/>oder auf zu wickeln, <TouchableOpacity/>und geben Sie dann dem <View />oder dem borderRadius<TouchableOpacity /> so , dass es auch auf beiden Android funktioniert wie auf IOS - Geräten.

Beispielsweise:-

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

-Vielen Dank

— Mukul Soni
quelle

0

Wenden Sie die folgende Codezeile an:

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