Что надо знать про
React-Native
Евгений Филатов
Нативные приложения
2
Как их делать?
Учи
Objective-C
3
React
4
React-driven-development
5
6
React-driven-development
var Profile = React.createClass({
render() {
return (
<div>
<img src={this.props.avatar}>
<span>{this.props.name}</span>
</div>
);
}
});
<div>
<Profile avatar="/avatar1.png" name="Kenan" />
<Profile avatar="/avatar2.png" name="Kel" />
</div>
7
React-driven-development
Kenan Kel
React
8
-Native
React-Native
9
Это все уже было
Tabris.js
NativeScript
10
11
Скорость
WebView
WebView — это браузер
в нативном приложении
12
13
Main thread
(Objective-C)
JavaScript
thread
thread 1 thread n
JavaScript
core
*.js
Нарисуй
кнопку
Я передам
Рисую
кнопка
JavaScript bridge
14
OBJ-C
React
15
-Native
16
<div className="profile">
<img src="/bob.png"/>
<span>Bob</span>
</div>
<View style={styles}>
<Image source={{uri: '…/bob.png'}}/>
<Text>Bob</Text>
</View>
var styles = {...}
17
Стили
18
19
var styles = {
profile: {
flex: 1,
backgroundColor: '#d6d7da'
}
};
20
var styles = StyleSheet.create({
profile: {
flex: 1,
backgroundColor: '#d6d7da'
}
});
У вас нет браузера
21
Полифилы из коробки
22
• Таймеры
• requestAnimationFrame
• fetch
• navigator
• console
Урл и роутер
23
Сцены
24
<Navigator/>
this.props.navigator.replace({
component: Kenny
})
<Kenny/>
События
25
26
tap on image
Responder
27
28
<Inbox/>
<Mail/>
<Mail/>
<Mail/>
<Mail/>
<Mail/>
onStartShouldSetResponder
onMoveShouldSetResponder
onResponderTerminationRequest
onResponderGrant
onResponderTerminate
github.com/wtfil/kievjs
29
По умолчанию вы в
оффлайне
30
31
Кеши…
Будь нативным
32
Не нашел на github,
найдешь на stackoverflow
33
34
@implementation FileUtil
RCT_EXPORT_METHOD(
readFile: (RCTResponseSenderBlock)callback
) {
}
callback(@[[NSNull null], file]);
Код из интернета
var {FileUtil} = require('NativeModules');
FileUtil.readFile(function (err, file) {
});
35
Можно ли с этим жить?
36
React-Native PhoneGap NativeScript
Платформы IOS + +
CSS стили в js + не весь
Нативный
рендер
+ WebView +
Общий код - + почти
Разработка
нативных
компонент
+ очень сложно +
Главное преимущество
— React
37
Спасибо!
@wtfil /wtfil

react-native