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

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͕͋ΔΈ͍͕ͨͩʜ