React Native Border Radius với màu nền

96

Trong React Native, borderRadiusđang hoạt động nhưng màu nền cho nút vẫn là hình vuông. Chuyện gì đang xảy ra ở đây?

JS

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

Phong cách

...
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
nguồn

chỉ là một phỏng đoán, hãy cố gắng cho borderStyle: 'solid'đếnsubmitText

— Cherniv

Không, đó didnt làm việc không may

— Chipe

bạn đang thử nghiệm trên môi trường nào? ios hay android?

— Cherniv

155

Hãy thử di chuyển kiểu nút sang TouchableHighlightchính nó:

Kiểu dáng:

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

Nút (giống nhau):

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

— Nader Dabit
nguồn

2

Cảm ơn! những paddingcũng khác chìa khóa quan trọng.

— DazChong

73

Bạn nên thêm overflow: hiddenvào phong cách của mình:

Js:

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

Kiểu dáng:

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

— Hossein
nguồn

3

overflow: 'hidden'làm việc cho tôi thậm chí không có phản ứng bản địa-button

— Evan Siroky

2

Cảm ơn. Có, việc đặt backgroundColorvà borderRadiustrên hộp chứa, sau đó thêm overflow: 'hidden'vào hộp chứa đã hiệu quả với tôi. (Cũng không sử dụng react-native-button.)

— David

2

đây là những gì tôi muốn! (không phải là kiểm tra một)

— Julien Malige

1

Không bao giờ đưa ra borderRadius cho bạn, <Text />luôn luôn bọc nó <Text />bên trong <View />hoặc trong của bạn <TouchableOpacity/>.

borderRadius bật <Text />sẽ hoạt động hoàn hảo trên các thiết bị Android. Nhưng trên thiết bị IOS nó sẽ không hoạt động.

Vì vậy, hãy thực hành điều này để bọc <Text/>bên trong của bạn <View/>hoặc trên <TouchableOpacity/>và sau đó cung cấp cho borderRadius cho cái đó <View />hoặc <TouchableOpacity /> để nó sẽ hoạt động trên cả Android cũng như trên các thiết bị IOS.

Ví dụ:-

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

-Cảm ơn

— mukul soni
nguồn

0

Áp dụng dòng mã dưới đây:

<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
nguồn