Je veux centrer une vue à l'intérieur d'une autre en React Native.
Voici mon code:
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'yellow',
},
outerCircle: {
backgroundColor: 'blue',
width: 100,
height: 100,
borderRadius: 100/2,
},
innerCircle: {
backgroundColor: 'red',
width: 80,
height: 80,
borderRadius: 80/2,
}
});
export default class RecorderButton extends React.Component {
_buttonPressAction() {
Alert.alert("button pressed");
}
render() {
return (
<TouchableOpacity activeOpacity={0.4}
onPress={this._buttonPressAction}
style={styles.container}>
<View style={styles.outerCircle}>
<View style={styles.innerCircle} />
</View>
</TouchableOpacity>
);
}
}
Je veux avoir des cercles bleus et rouges concentriques. Comment puis-je y parvenir?
Vous centrez déjà dans le conteneur. Suivez la même chose pour le Cercle extérieur également.
outerCircle: {
backgroundColor: 'blue',
width: 100,
height: 100,
borderRadius: 100/2,
justifyContent: 'center',
alignItems: 'center'
},