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
980
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
760
Go + QtでiOS アプリ開発
matuyuji
0
370
@_specialized なお話し
matuyuji
0
460
Xcode Souce Code Extensionを使ってみた
matuyuji
0
330
Codebeatを 試してみた
matuyuji
0
720
React Nativeを使ってみた
matuyuji
0
1.2k
SwiftでLens
matuyuji
1
930
SwiftAndoroidを使ってシミュレータでアプリを動かした話
matuyuji
0
580
Other Decks in Programming
See All in Programming
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
250
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
7
2.8k
EventSourcingの理想と現実
wenas
6
2.1k
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
240
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
160
Tuning GraphQL on Rails
pyama86
2
1k
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
350
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
170
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.3k
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
200
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
4 Signs Your Business is Dying
shpigford
180
21k
Bash Introduction
62gerente
608
210k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
Building Your Own Lightsaber
phodgson
102
6.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Being A Developer After 40
akosma
86
590k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Side Projects
sachag
452
42k
Thoughts on Productivity
jonyablonski
67
4.3k
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͕͋ΔΈ͍͕ͨͩʜ