পটভূমির রঙের সাথে নেটিভ বর্ডার ব্যাসার্ধকে প্রতিক্রিয়া জানান


100

রিএ্যাক্ট নেটিভে, 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
ইভান চেরনিখ

না, এটি দুর্ভাগ্যজনকভাবে কাজ করে নি
চিপ

আপনি কোন পরিবেশের উপর পরীক্ষা করছেন? আইওএস নাকি অ্যান্ড্রয়েড?
ইভান চেরনিখ

উত্তর:


158

বোতাম স্টাইলিংটিকে 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>

এখানে চিত্র বর্ণনা লিখুন


4
ধন্যবাদ! paddingএছাড়াও আরেকটি গুরুত্বপূর্ণ কি।
ড্যাজচং

80

overflow: hiddenআপনার আপনার শৈলীতে যুক্ত করা উচিত :

জেএস:

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

শৈলী:

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

4
overflow: 'hidden'এমনকি নেটিভ-বাটন-প্রতিক্রিয়া ছাড়াই আমার পক্ষে কাজ করেছেন
ইভান সিরোকি

4
ধন্যবাদ হ্যাঁ, কনটেইনারটি রেখে backgroundColorএবং borderRadiusতারপরে ধারকটিতে যুক্ত overflow: 'hidden'করা আমার পক্ষে কাজ করে। (এছাড়াও ব্যবহার করা হচ্ছে না react-native-button))
ডেভিড

4
এটাই আমি চেয়েছিলাম! (চেক করা এক নয়)
জুলিয়ান মালিগে

2

আপনার ভিতরে বা আপনার ভিতরে <Text />সর্বদা মোড়কে সীমানার রেডিওয়াসটি কখনও দিবেন না ।<Text /><View /><TouchableOpacity/>

সীমানা রেডিওস <Text />অ্যান্ড্রয়েড ডিভাইসে পুরোপুরি কাজ করবে। তবে আইওএস ডিভাইসে এটি কাজ করবে না।

সুতরাং আপনার মোড়ানো আপনার অভ্যাস মধ্যে এই রাখুন <Text/>ভিতরে আপনার <View/>বা <TouchableOpacity/>এবং তারপর দিতে borderRadius যে <View />বা <TouchableOpacity /> যাতে এটি উভয় Android এর উপর সেইসাথে IOS ডিভাইসে কাজ করবে।

উদাহরণ স্বরূপ:-

<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"
/>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.