React Native Border Radius dengan warna latar belakang

100

Di React Native, borderRadiusberfungsi tetapi warna latar belakang yang diberikan ke tombol tetap persegi. Apa yang terjadi disini?

JS

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

Gaya

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

masukkan deskripsi gambar di sini

javascript styles react-native Chipe
sumber
hanya tebakan, coba berikan borderStyle: 'solid'kepadasubmitText
Ivan Chernykh
Tidak, sayangnya itu tidak berhasil
Chipe
di lingkungan mana yang Anda uji? ios atau android?
Ivan Chernykh

Jawaban:

158

Coba pindahkan gaya tombol TouchableHighlightitu sendiri:

Gaya:

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

Tombol (sama):

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

masukkan deskripsi gambar di sini

Nader Dabit
sumber
2
Terima kasih! yang paddingjuga lain kunci penting.
DazChong
80

Anda harus menambahkan overflow: hiddengaya Anda:

Js:

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

Gaya:

submit {
   backgroundColor: '#68a0cf';
   overflow: 'hidden';
}
Hossein
sumber
3
overflow: 'hidden'bekerja untuk saya bahkan tanpa react-native-button
Evan Siroky
2
Terima kasih. Ya, meletakkan backgroundColordan borderRadiusdi atas wadah, lalu menambahkan overflow: 'hidden'ke wadah itu berhasil untuk saya. (Juga tidak menggunakan react-native-button.)
David
2
ini yang kuinginkan! (bukan yang dicentang)
Julien Malige
2

Jangan pernah memberikan borderRadius untuk <Text />selalu membungkusnya <Text />di dalam <View />atau di dalam Anda <TouchableOpacity/>.

borderRadius on <Text />akan bekerja dengan sempurna di perangkat Android. Tetapi pada perangkat IOS itu tidak akan berfungsi.

Jadi pertahankan ini dalam latihan Anda untuk membungkus Anda <Text/>di dalam <View/>atau di <TouchableOpacity/>dan kemudian berikan borderRadius untuk itu <View />atau <TouchableOpacity /> agar itu akan berfungsi baik di Android maupun di perangkat IOS.

Sebagai contoh:-

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

-Terima kasih

mukul soni
sumber
0

Terapkan baris kode di bawah ini:

<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"
/>
sumit kumar pradhan
sumber