Bán kính đường viền gốc phản ứng có màu nền

Question

Trong phản ứng gốc, borderRadius đang hoạt động nhưng màu nền cho nút vẫn giữ 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' 
}, 
... 

Answer 1

Hãy thử di chuyển các phong cách nút bên TouchableHighlight bản thân:

Styles:

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

Button (giống nhau):

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

Answer 2

Nếu bạn sử dụng react-native-button bạn nên thêm overflow: hidden để phong cách của bạn:

Js:

import Button from 'react-native-button'; 

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

Styles:

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