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
970
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.6k
ARKit + SceneKitでMinesweeperを作ってみた
matuyuji
1
760
Go + QtでiOS アプリ開発
matuyuji
0
370
@_specialized なお話し
matuyuji
0
450
Xcode Souce Code Extensionを使ってみた
matuyuji
0
320
Codebeatを 試してみた
matuyuji
0
700
React Nativeを使ってみた
matuyuji
0
1.2k
SwiftでLens
matuyuji
1
910
SwiftAndoroidを使ってシミュレータでアプリを動かした話
matuyuji
0
550
Other Decks in Programming
See All in Programming
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
小さな開発会社を作った理由
polidog
0
1.9k
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
Featured
See All Featured
Statistics for Hackers
jakevdp
792
220k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Scaling GitHub
holman
458
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
How GitHub (no longer) Works
holman
305
140k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
A Tale of Four Properties
chriscoyier
155
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
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͕͋ΔΈ͍͕ͨͩʜ