Yerel Kenarlık Yarıçapına arka plan rengiyle tepki verin

103

React Native'de borderRadiusçalışıyor ancak düğmeye verilen arka plan rengi kare olarak kalıyor. Burada neler oluyor?

JS

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

Tarzı

...
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
kaynak

sadece bir tahmin, vermeye çalışacağım borderStyle: 'solid'içinsubmitText

— Ivan Chernykh

Hayır, bu maalesef işe yaramadı

— Chipe

hangi ortamda test ediyorsunuz? ios veya android?

— Ivan Chernykh

161

Düğme stilini TouchableHighlightkendisine taşımayı deneyin :

Stiller:

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

Düğme (aynı):

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

— Nader Dabit
kaynak

2

Teşekkürler! paddingAyrıca bir başka önemli anahtar.

— DazChong

81

Eklemelisin overflow: hiddenStillerinize :

Js:

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

Stiller:

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

— Hossein
kaynak

3

overflow: 'hidden'react-native-button olmasa bile benim için çalıştı

— Evan Siroky

2

Teşekkürler. Evet, koyarak backgroundColorve borderRadiuskonteyner üzerinde, daha sonra ekleme overflow: 'hidden'benim için çalıştı kaba. (Ayrıca kullanmıyor react-native-button.)

— David

2

istediğim buydu! (işaretli değil)

— Julien Malige

2

İçin borderRadius vermeyin senin <Text />hep sarmak <Text />gözündeki <View />veya sizin<TouchableOpacity/> .

borderRadius on <Text />, Android cihazlarda mükemmel şekilde çalışacaktır. Ancak IOS cihazlarında çalışmaz.

Yani sarmak için pratikte bu tutmak <Text/>içini sizin <View/>veya üzerinde <TouchableOpacity/>hiç borderRadius ve sonra vermek <View />veya <TouchableOpacity /> bu nedenle hem Android'de hem de IOS cihazlarda çalışacağını.

Örneğin:-

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

-Teşekkürler

— mukul soni
kaynak

0

Aşağıdaki kod satırını uygulayın:

<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
kaynak