ตอบสนองรัศมีเส้นขอบดั้งเดิมด้วยสีพื้นหลัง

ใน React Native borderRadiusกำลังทำงาน แต่สีพื้นหลังที่ให้กับปุ่มยังคงเป็นสี่เหลี่ยมจัตุรัส เกิดขึ้นที่นี่คืออะไร?

JS

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

ลองย้ายรูปแบบปุ่มไปที่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>

คุณควรเพิ่มoverflow: hiddenสไตล์ของคุณ:

Js:

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

รูปแบบ:

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

ไม่ควรให้ borderRadius ที่คุณ<Text />มักจะห่อที่<Text />ภายในของคุณหรือของคุณ<View /><TouchableOpacity/>

borderRadius บน<Text />จะทำงานได้อย่างสมบูรณ์บนอุปกรณ์ Android แต่บนอุปกรณ์ IOS จะไม่ทำงาน

ดังนั้นให้ปฏิบัติต่อสิ่งนี้เพื่อห่อหุ้ม<Text/>ไว้ใน<View/>หรือบนของคุณ<TouchableOpacity/>จากนั้นให้ borderRadius กับสิ่งนั้น<View />หรือ<TouchableOpacity /> เพื่อให้มันทำงานได้ทั้งบน Android และบนอุปกรณ์ IOS

ตัวอย่างเช่น:-

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

- ขอบคุณ

ใช้บรรทัดด้านล่างของรหัส:

<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"
/>