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.8k
ARKit + SceneKitでMinesweeperを作ってみた
matuyuji
1
790
Go + QtでiOS アプリ開発
matuyuji
0
400
@_specialized なお話し
matuyuji
0
490
Xcode Souce Code Extensionを使ってみた
matuyuji
0
400
Codebeatを 試してみた
matuyuji
0
780
React Nativeを使ってみた
matuyuji
0
1.3k
SwiftでLens
matuyuji
1
990
SwiftAndoroidを使ってシミュレータでアプリを動かした話
matuyuji
0
630
Other Decks in Programming
See All in Programming
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
0
360
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
220
コンテキストエンジニアリング Cursor編
kinopeee
1
740
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
290
tool ディレクティブを導入してみた感想
sgash708
1
160
旅行プランAIエージェント開発の裏側
ippo012
1
590
AI時代のUIはどこへ行く?
yusukebe
4
940
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
340
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
970
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
17
3.7k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Facilitating Awesome Meetings
lara
55
6.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
510
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Making Projects Easy
brettharned
117
6.4k
Writing Fast Ruby
sferik
628
62k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
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͕͋ΔΈ͍͕ͨͩʜ