React Native。
これは私のコードです:
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>
);
}
}
青と赤の円を同心円にしたい。どうすればそれを達成できますか?
すでにコンテナの中央に配置されています。 outerCircleについても同様です。
outerCircle: {
backgroundColor: 'blue',
width: 100,
height: 100,
borderRadius: 100/2,
justifyContent: 'center',
alignItems: 'center'
},