Reaguj na Native Border Radius z kolorem tła

99

W React Native borderRadiusdziała, ale kolor tła nadany przyciskowi pozostaje kwadratowy. Co tu się dzieje?

JS

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

Styl

...
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
źródło

tylko przypuszczenie, spróbuj dać borderStyle: 'solid'dosubmitText

— Ivan Chernykh

Nie, to niestety nie zadziałało

— Chipe

w którym środowisku testujesz? iOS czy Android?

— Ivan Chernykh

157

Spróbuj przenieść styl przycisków do TouchableHighlightsamego siebie:

Style:

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

Przycisk (taki sam):

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

— Nader Dabit
źródło

2

Dzięki! paddingrównież inny ważny klucz.

— DazChong

80

Powinieneś dodać overflow: hiddendo swoich stylów:

Js:

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

Style:

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

— Hossein
źródło

3

overflow: 'hidden'pracował dla mnie nawet bez przycisku reagowania

— Evan Siroky

2

Dzięki. Tak, założenie backgroundColori borderRadiusna pojemnik, a następnie dodanie overflow: 'hidden'do pojemnika zadziałało. (Również nie używa react-native-button.)

— David

2

tego właśnie chciałem! (nie w kratkę)

— Julien Malige

2

Nigdy nie dawaj borderRadius do swojego <Text />zawsze zawijanego <Text />wewnątrz <View />lub w Twoim <TouchableOpacity/>.

borderRadius on <Text />będzie działał idealnie na urządzeniach z Androidem. Ale na urządzeniach IOS to nie zadziała.

Więc zachowaj to w swojej praktyce, aby zawinąć <Text/>wnętrze <View/>lub <TouchableOpacity/>nałożyć, a następnie nadać borderRadius temu <View />lub <TouchableOpacity /> tak, aby działał zarówno na urządzeniach z Androidem, jak i na IOS.

Na przykład:-

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

-Dzięki

— mukul soni
źródło

0

Zastosuj poniższy wiersz kodu:

<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
źródło