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

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'
},
...

javascript styles react-native

— Chipe
स्रोत

सिर्फ एक अनुमान, देने की कोशिश 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"
/>

— सुमित कुमार प्रधान
स्रोत