Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Nativeで UIコンポーネントをつくる
Search
matuyuji
May 25, 2016
Programming
0
1k
React Nativeで UIコンポーネントをつくる
React NativeのUIコンポーネントをiOSでつくる方法を紹介します
matuyuji
May 25, 2016
Tweet
Share
More Decks by matuyuji
See All by matuyuji
Emacs × Touch Bar
matuyuji
2
1.7k
ARKit + SceneKitでMinesweeperを作ってみた
matuyuji
1
780
Go + QtでiOS アプリ開発
matuyuji
0
380
@_specialized なお話し
matuyuji
0
470
Xcode Souce Code Extensionを使ってみた
matuyuji
0
350
Codebeatを 試してみた
matuyuji
0
750
React Nativeを使ってみた
matuyuji
0
1.3k
SwiftでLens
matuyuji
1
950
SwiftAndoroidを使ってシミュレータでアプリを動かした話
matuyuji
0
600
Other Decks in Programming
See All in Programming
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
Ruby on cygwin 2025-02
fd0
0
140
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Formの複雑さに立ち向かう
bmthd
1
720
Introduction to kotlinx.rpc
arawn
0
630
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Designing Experiences People Love
moore
139
23k
Site-Speed That Sticks
csswizardry
3
370
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
How GitHub (no longer) Works
holman
313
140k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Fireside Chat
paigeccino
34
3.2k
Adopting Sorbet at Scale
ufuk
74
9.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
3FBDU/BUJWFͰ 6*ίϯϙʔωϯτΛͭ͘Δ ؔϞόΠϧΞϓϦݚڀձ !NBUVZVKJ
@matuyuji safx-dev.blogspot.jp
typetalk t
ΤϯδχΞ σβΠφʔ ืूத %*:ܦݧෆ ަྲྀձ ژେֶ࣌ܭ
3FBDU/BUJWF
/BUJWF 6*$PNQPOFOU
1BDLBHF.BOBHFS
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
#VJMEJOH $VTUPN$PNQPOFOU
w ์ࣹঢ়άϥσʔγϣϯ w ܘΛࢦఆͰ͖Δ w ৭ΛࢦఆͰ͖Δ
4XJGUͰՄೳͰ͕͢ɺϚΫϩ͕͑Δ0CK$ͷ΄͏ָ͕
3$5@&
[email protected]
%6-& #import “RadialGradientViewManager.h” @implementation RadialGradientViewManager RCT_EXPORT_MODULE() - (UIView *)view {
return [[UIView alloc] init]; } @end
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> ωΠςΟϒͷϚωʔδϟ ΛࣗಈͰݟ͚ͭΔ
$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*ϏϡʔΛॻ͘ ˠࠇͷάϥσʔγϣϯ ܘ
@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ͷϓϩύςΟΛ ΤΫεϙʔτͯ͠Δ
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) ϚωʔδϟͰˣΛՃ
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.-ͷ৭Λ͍͍ײ͡ʹ ॲཧͯ͘͠ΕΔϝιου
8SBQVQ
·ͱΊ w SOQNͰطଘίϯϙʔωϯτΛՃͰ͖Δ w ίϯϙʔωϯτࣗ࡞ΘΓͱ؆୯ w ࠷ॳ͔ΒϥΠϒϥϦͱͯ͠࠶ར༻͢ΔؾͳΒ react-native new-library --name
RadialGradient w $PDPB1PETͷͷΛ؆୯ʹ͑Δͷ͔ະௐࠪ ˠ1PETʹ3FBDU/BUJWF͕͋ΔΈ͍͕ͨͩʜ