Slide 1
Slide 1 text
3FBDU/BUJWFͰ
6*ίϯϙʔωϯτΛͭ͘Δ
ؔϞόΠϧΞϓϦݚڀձ
!NBUVZVKJ
Slide 2
Slide 2 text
@matuyuji
safx-dev.blogspot.jp
Slide 3
Slide 3 text
typetalk
t
Slide 4
Slide 4 text
ΤϯδχΞ
σβΠφʔ
ืूத
%*:ܦݧෆ
ަྲྀձ
ژେֶ࣌ܭ
Slide 5
Slide 5 text
3FBDU/BUJWF
Slide 6
Slide 6 text
/BUJWF
6*$PNQPOFOU
Slide 7
Slide 7 text
1BDLBHF.BOBHFS
Slide 8
Slide 8 text
SOQN
rnpm install react-native-linear-gradient
Sample Button
import LinearGradient from 'react-native-linear-gradient'
OQNJHSOQN
Slide 9
Slide 9 text
#VJMEJOH
$VTUPN$PNQPOFOU
Slide 10
Slide 10 text
w ์ࣹঢ়άϥσʔγϣϯ
w ܘΛࢦఆͰ͖Δ
w ৭ΛࢦఆͰ͖Δ
Slide 11
Slide 11 text
4XJGUͰՄೳͰ͕͢ɺϚΫϩ͕͑Δ0CK$ͷ΄͏ָ͕
Slide 12
Slide 12 text
3$5@&[email protected]%6-&
#import “RadialGradientViewManager.h”
@implementation RadialGradientViewManager
RCT_EXPORT_MODULE()
- (UIView *)view {
return [[UIView alloc] init];
}
@end
Slide 13
Slide 13 text
import { requireNativeComponent } from 'react-native';
const NativeRadialGradient = requireNativeComponent('RadialGradientView', null);
Welcome to React Native!
To get started, edit index.ios.js
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
ωΠςΟϒͷϚωʔδϟ
ΛࣗಈͰݟ͚ͭΔ
Slide 14
Slide 14 text
$VTUPN7JFX
@interface RadialGradientView : UIView
@property(nonatomic, assign) CGFloat radius;
@end
@implementation RadialGradientView
- (void)drawRect:(CGRect)rect {
CGFloat colorComponents[] = {1,0,0,1, 0,0,0,1};
CGPoint center = CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2);
CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
CGContextRef context = UIGraphicsGetCurrentContext();
CGGradientRef gradient = CGGradientCreateWithColorComponents(space, colorComponents, nil, 2);
CGContextSaveGState(context);
CGContextDrawRadialGradient(context, gradient, center, 0.0, center, self.radius, 0);
CGContextRestoreGState(context);
CGColorSpaceRelease(space);
CGGradientRelease(gradient);
}
@end ී௨ͷ6*ϏϡʔΛॻ͘
ˠࠇͷάϥσʔγϣϯ
ܘ
Slide 15
Slide 15 text
@implementation RadialGradientViewManager
RCT_EXPORT_MODULE()
- (UIView *)view {
return [[RadialGradientView alloc] init];
}
RCT_EXPORT_VIEW_PROPERTY(radius, CGFloat)
@end
7JFXͷϓϩύςΟΛ
ΤΫεϙʔτͯ͠Δ
Slide 16
Slide 16 text
3$5$POWFSU
#import "RCTConvert.h"
@interface RadialGradientView : UIView
@property(nonatomic, assign) CGFloat radius;
@property(nonatomic, retain) NSArray* colors;
@end
@implementation RadialGradientView
- (void)drawRect:(CGRect)rect {
CGFloat colorComponents[self.colors.count * 4];
CGFloat* p = colorComponents;
NSArray* cs = [RCTConvert UIColorArray: self.colors];
for (UIColor* c in cs) {
CGFloat r, g, b, a;
[c getRed:&r green:&g blue:&b alpha:&a];
*(p++) = r; *(p++) = g; *(p++) = b; *(p++) = a;
}
ɿ
RCT_EXPORT_VIEW_PROPERTY(colors, NSArray)
ϚωʔδϟͰˣΛՃ
Slide 17
Slide 17 text
import { processColor } from 'react-native';
class RadialGradient extends Component {
render() {
const { colors, ...otherProps } = this.props;
return ;
}
}
)5.-ͷ৭Λ͍͍ײ͡ʹ
ॲཧͯ͘͠ΕΔϝιου
Slide 18
Slide 18 text
8SBQVQ
Slide 19
Slide 19 text
·ͱΊ
w SOQNͰطଘίϯϙʔωϯτΛՃͰ͖Δ
w ίϯϙʔωϯτࣗ࡞ΘΓͱ؆୯
w ࠷ॳ͔ΒϥΠϒϥϦͱͯ͠࠶ར༻͢ΔؾͳΒ
react-native new-library --name RadialGradient
w $PDPB1PETͷͷΛ؆୯ʹ͑Δͷ͔ະௐࠪ
ˠ1PETʹ3FBDU/BUJWF͕͋ΔΈ͍͕ͨͩʜ