Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

53e469a19bcb4584c87789d237128ca0?s=128

matuyuji

May 25, 2016
Tweet

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' OQNJHSOQN
  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. $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*ϏϡʔΛॻ͘ ੺ˠࠇͷάϥσʔγϣϯ ൒ܘ
  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͕͋ΔΈ͍͕ͨͩʜ