React Nativeで UIコンポーネントをつくる

React NativeのUIコンポーネントをiOSでつくる方法を紹介します

Transcript

1. 3FBDU
   /BUJWFͰ
   6*ίϯϙʔωϯτΛͭ͘Δ ؔ੢ϞόΠϧΞϓϦݚڀձ
   
   
   !NBUVZVKJ
2. @matuyuji safx-dev.blogspot.jp
3. typetalk t
4. ΤϯδχΞ
   σβΠφʔ
   ืूத
   %*:ܦݧෆ໰
   ௒ަྲྀձ
   
   
   ౔
   
   
   ژ౎େֶ࣌ܭ୆
5. 
   
   
   3FBDU
   /BUJWF
6. /BUJWF
   
   6*
   $PNQPOFOU
7. 1BDLBHF
   .BOBHFS
8. SOQN rnpm install react-native-linear-gradient <LinearGradient colors={['#abc', 'blue', '#fa1322']} style={{padding: 15, borderRadius: 80}}> <Text style={{color: ‘#ffffff', backgroundColor: 'transparent'}}> Sample Button </Text> </LinearGradient> import LinearGradient from 'react-native-linear-gradient' OQN
   J
   H
   SOQN
9. #VJMEJOH
   $VTUPN
   $PNQPOFOU
10. w ์ࣹঢ়άϥσʔγϣϯ
    w ൒ܘΛࢦఆͰ͖Δ
    w ৭ΛࢦఆͰ͖Δ
11. 4XJGUͰ΋ՄೳͰ͕͢ɺϚΫϩ͕࢖͑Δ0CK$ͷ΄͏ָ͕
12. 3$5@&91035@.0%6-& #import “RadialGradientViewManager.h” @implementation RadialGradientViewManager RCT_EXPORT_MODULE() - (UIView *)view { return [[UIView alloc] init]; } @end
13. import { requireNativeComponent } from 'react-native'; const NativeRadialGradient = requireNativeComponent('RadialGradientView', null); <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> <NativeRadialGradient backgroundColor="blue" style={{width: 200, height: 200}} /> </View> ωΠςΟϒͷϚωʔδϟ
    ΛࣗಈͰݟ͚ͭΔ
14. $VTUPN
    7JFX @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*ϏϡʔΛॻ͘ ੺
    ˠ
    ࠇ
    ͷάϥσʔγϣϯ ൒ܘ
15. @implementation RadialGradientViewManager RCT_EXPORT_MODULE() - (UIView *)view { return [[RadialGradientView alloc] init]; } RCT_EXPORT_VIEW_PROPERTY(radius, CGFloat) @end <NativeRadialGradient radius={150} style={{width: 200, height: 200}} /> 7JFXͷϓϩύςΟΛ
    ΤΫεϙʔτͯ͠΍Δ
16. 3$5$POWFSU #import "RCTConvert.h" @interface RadialGradientView : UIView @property(nonatomic, assign) CGFloat radius; @property(nonatomic, retain) NSArray<NSString*>* colors; @end @implementation RadialGradientView - (void)drawRect:(CGRect)rect { CGFloat colorComponents[self.colors.count * 4]; CGFloat* p = colorComponents; NSArray<UIColor*>* 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) ϚωʔδϟͰ͸ˣΛ௥Ճ
17. import { processColor } from 'react-native'; class RadialGradient extends Component { render() { const { colors, ...otherProps } = this.props; return <NativeRadialGradient {...otherProps} colors={colors.map(processColor)} />; } } <RadialGradient colors={[‘#f00', 'yellow', ‘#0f0']} radius={150} style={{width: 200, height: 200}} /> )5.-ͷ৭Λ͍͍ײ͡ʹ
    ॲཧͯ͘͠ΕΔϝιου
18. 8SBQVQ
19. ·ͱΊ w SOQNͰطଘίϯϙʔωϯτΛ௥ՃͰ͖Δ
    w ίϯϙʔωϯτࣗ࡞΋ΘΓͱ؆୯
    w ࠷ॳ͔ΒϥΠϒϥϦͱͯ͠࠶ར༻͢ΔؾͳΒ react-native new-library --name RadialGradient w $PDPB1PETͷ΋ͷΛ؆୯ʹ࢖͑Δͷ͔͸ະௐࠪ ˠ
    1PETʹ3FBDU/BUJWF͕͋ΔΈ͍͕ͨͩʜ