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
990
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
770
Go + QtでiOS アプリ開発
matuyuji
0
380
@_specialized なお話し
matuyuji
0
470
Xcode Souce Code Extensionを使ってみた
matuyuji
0
350
Codebeatを 試してみた
matuyuji
0
740
React Nativeを使ってみた
matuyuji
0
1.3k
SwiftでLens
matuyuji
1
940
SwiftAndoroidを使ってシミュレータでアプリを動かした話
matuyuji
0
590
Other Decks in Programming
See All in Programming
Jaspr Dart Web Framework 박제창 @Devfest 2024
itsmedreamwalker
0
150
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
1.6k
AIレシート読み取り機能をRuby on Rails on AWSで実現するLLMにまつわるアレコレ / AI-based receipt reading function powered by LLM on Ruby on Rails on AWS
moznion
3
120
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
290
混沌とした例外処理とエラー監視に秩序をもたらす
morihirok
10
2k
PSR-15 はあなたのための ものではない? - phpcon2024
myamagishi
0
400
AHC041解説
terryu16
0
310
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
140
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
930
AWSのLambdaで PHPを動かす選択肢
rinchoku
2
390
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
770
Оптимизируем производительность блока Казначейство
lamodatech
0
940
Featured
See All Featured
Scaling GitHub
holman
459
140k
4 Signs Your Business is Dying
shpigford
182
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
560
A designer walks into a library…
pauljervisheath
205
24k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
950
Raft: Consensus for Rubyists
vanstee
137
6.7k
Designing Experiences People Love
moore
139
23k
Practical Orchestrator
shlominoach
186
10k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
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͕͋ΔΈ͍͕ͨͩʜ