I would like to make the circle view by using react-native.
Here what I did:
circle: { position: 'absolute', borderWidth: 10, borderColor: '#fff', top: 20, left: 30, width: 150, height: 150, borderRadius: 150 / 2, backgroundColor: '#ED1D27', } And view
<View style={styles.circle}></View> The result is:
There is and outline rounded the circle.
I don't want that outline. I checked by remove the border radius and it has no outline like below:
I have no idea for this issue, please help me...
2 Answers
Answers 1
So I am not entirely sure why it gives that very small red border with your current rule. It could be an actual bug. Regardless if I understand correctly, you want a circle without that small red border. You can achieve that by removing your border property:
position: 'absolute', top: 20, left: 30, width: 150, height: 150, borderRadius: 150 / 2, backgroundColor: '#ED1D27', Resulting in:
If you do want a border, a potential workaround could be:
inner: { position: 'relative', width: 150, height: 150, borderRadius: 150 / 2, backgroundColor: '#ED1D27', }, outter:{ position: 'absolute', paddingTop:10, paddingLeft:10, top: 20, left: 30, width: 170, height: 170, borderRadius: 160 / 2, backgroundColor: '#000', }, With a view heirarchy like:
<View style={styles.container}> <View style={styles.outter}> <View style={styles.inner}></View> </View> </View> Resulting in:
Answers 2
RE-EDIT: Turns out that this border-radius issue is not isolated to working with react alone, but a general css known issue, that has been raised [and marked as fixed] numerous times. I found this link, that cites they found a solution, but also states the cause. The link in question's problem cites it initially as being related to box-shadow but from a quick google search there seems to many issues with border-radius.
Given cause:
It turns out that if your border radius is larger than the height of the element (taking in to account padding, font-size, and so forth) this visual error will occur.
A fiddle is given in the github link http://jsfiddle.net/2HqTZ/ (with html2canvas)
Earlier proposed solution answer 1- link to expo
Edited earlier proposed solution answer 2 - expo link
Current/ best solution (of mine) IMHO link
I think this is the best solution. I noted that if the border color was left out in the circedge css but left in only the circle css, the border 'outline' effect is greatly reduced. I also replaced borderRadius with borderTopLeftRadius etc after reading the known issues on caniuse.com
import React, { Component } from 'react'; import { Text, View, StyleSheet } from 'react-native'; import { Constants } from 'expo'; export default class App extends Component { render() { return ( <View style={styles.container}> <View style={styles.square} /> <View style={styles.circedge}/> <View style={styles.circle}> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 2, alignItems: 'center', justifyContent: 'center', paddingTop: Constants.statusBarHeight, backgroundColor: '#fff', }, square: { position: 'absolute', top: 30, left: 30, width: 200, height: 100, backgroundColor: 'red' }, circle: { position: 'absolute', borderColor: '#fff', top: 60, left: 60, width: 150, height: 150, borderTopLeftRadius:150/2, borderTopRightRadius:150/2, borderBottomLeftRadius:150/2, borderBottomRightRadius:150/2, backgroundColor: '#ED1D27', }, circedge:{ position: 'absolute', paddingTop:10, paddingLeft:10, top: 50, left: 50, width: 170, height: 170, borderTopLeftRadius:170/2, borderTopRightRadius:170/2, borderBottomLeftRadius:170/2, borderBottomRightRadius:170/2, backgroundColor: '#fff', } }); 
0 comments:
Post a Comment