पृष्ठभूमि रंग के साथ प्रतिक्रियाशील मूल सीमा त्रिज्या


94

रिएक्ट नेटिव में, borderRadiusकाम कर रहा है लेकिन बटन को दिया गया बैकग्राउंड एक वर्ग रहता है। यहाँ क्या हो रहा है?

जे एस

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

अंदाज

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

यहां छवि विवरण दर्ज करें


सिर्फ एक अनुमान, देने की कोशिश borderStyle: 'solid'करने के लिएsubmitText
Cherniv

नहीं, वह फ्लॉप दुर्भाग्य से काम
Chipe

आप किस वातावरण में परीक्षण कर रहे हैं? ios या Android?
चेर्निव

जवाबों:


154

बटन स्टाइल को TouchableHighlightस्वयं तक ले जाने का प्रयास करें :

शैलियाँ:

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

बटन (वही):

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

यहां छवि विवरण दर्ज करें


2
धन्यवाद! यह paddingभी एक और महत्वपूर्ण कुंजी है।
डैज़कॉन्ग

71

आपको overflow: hiddenअपनी शैलियों में जोड़ना चाहिए :

जे एस:

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

शैलियाँ:

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

3
overflow: 'hidden'प्रतिक्रिया-मूल-बटन के बिना भी मेरे लिए काम किया
इवान सिरोकी

2
धन्यवाद। हाँ, कंटेनर पर backgroundColorऔर borderRadiusफिर कंटेनर में डालकर overflow: 'hidden'मेरे लिए काम किया। (इसके अलावा उपयोग नहीं react-native-button।)
डेविड

2
मुझे यही चाहिए था ! (चेक नहीं किया गया)
जुलिएन मालिज

1

बॉर्डररेडियस को कभी भी अपने अंदर <Text />लपेटें नहीं जो <Text />आपके अंदर <View />या आपके अंदर है <TouchableOpacity/>

borderRadius <Text />एंड्रॉइड डिवाइस पर पूरी तरह से काम करेगा। लेकिन IOS उपकरणों पर यह काम नहीं करेगा।

तो <Text/>अपने <View/>या अपने अंदर लपेटने के लिए इसे अपने अभ्यास में रखें <TouchableOpacity/>और फिर बॉर्डररेडियस को उस पर <View />या <TouchableOpacity /> तो दें ताकि यह एंड्रॉइड के साथ-साथ आईओएस उपकरणों पर भी काम करेगा।

उदाहरण के लिए:-

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

-धन्यवाद


0

कोड के नीचे लाइन लागू करें:

<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"
/>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.