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
quelle
borderStyle: 'solid'
demsubmitText
Antworten:
Versuchen Sie, das Tasten-Styling auf das zu verschieben
TouchableHighlight
selbst zu verschieben:Stile:
Taste (gleich):
quelle
padding
auch ein weiterer wichtiger Schlüssel.Sie sollten hinzufügen
overflow: hidden
Ihren Stilen :Js:
Stile:
quelle
overflow: 'hidden'
arbeitete für mich auch ohnebackgroundColor
undborderRadius
auf den Container und das Hinzufügenoverflow: 'hidden'
zum Container hat für mich funktioniert. (Auch nicht verwendenreact-native-button
.)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:-
-Vielen Dank
quelle
Wenden Sie die folgende Codezeile an:
quelle