ReactNative
5 分钟 读完 (大约 693 个字)

推荐React-Native-开源移动-UI-组件

React Native 是近期 Facebook 基于 MIT 协议开源的原生移动应用开发框架，已经用于 Facebook 的生产环境。React
Native 可以使用最近非常流行的React.js库来开发 iOS
和 Android 原生 APP。

iOS 表单处理控件 tcomb-form-native

tcomb-form-native是 React Native
强大的表单处理控件，支持 JSON 模式，可插拔的外观和感觉。在线演示：<http://react.rocks/example/tcomb-form-
native>。

摄像机视图 react-native-camera

react-native-camera是 React
Native 的摄像头 viewport。这个模块应用于开发的早期阶段，它支持摄像头的转换和基本图片捕捉。

使用示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

var React = require('react-native');



var {



  AppRegistry,



  StyleSheet,



  Text,



  View,



} = React;



var Camera = require('react-native-camera');



var cameraApp = React.createClass({



  render: function() {



    return (



      <View



        <TouchableHighlight onPress={this._switchCamera}>



          <View>



            <Camera>



              ref="cam"



              aspect="Stretch"



              orientation="PortraitUpsideDown"



              style={{height: 200, width: 200}}



            />



          </View>



        </TouchableHighlight>



      </View>



    );



  },



  _switchCamera: function() {



    this.refs.cam.switch();



  }



});



AppRegistry.registerComponent('cameraApp', () = cameraApp);

react-native-video

react-native-video是Video标签控件。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// Within your render function, assuming you have a file called



 // "background.mp4" in your project



 <Video source={"background"} style={styles.backgroundVideo} repeat={true} />



 // Later on in your styles..



 var styles = Stylesheet.create({



   backgroundVideo: {



     resizeMode: 'cover', // stretch and contain also supported



     position: 'absolute',



     top: 0,



     left: 0,



     bottom: 0,



     right: 0,



   },



 });

导航控件 react-native-navbar

react-native-navbar是用于 React
Native 上简单的定制化导航栏。

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
var NavigationBar = require('react-native-navbar');



 var ExampleProject = React.createClass({



   renderScene: function(route, navigator) {



     var Component = route.component;



     var navBar = route.navigationBar;



     if (navBar) {



       navBar = React.addons.cloneWithProps(navBar, {navigator: navigator,



         route: route



       });



     }    return (<View style={styles.navigator}



         {navBar}<Component navigator={navigator} route={route} /



       </View



     );



   },  render: function() {return (<Navigator



         style={styles.navigator}



         renderScene={this.renderScene}



         initialRoute={{



           component: InitialView,



           navigationBar: <NavigationBar title="Initial View"/



         }}



       /



     );



   }



 });

React Native 轮播控件 react-native-carousel

react-native-carousel是一个简单的
React Native 轮播控件。

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var Carousel = require('react-native-carousel');var ExampleProject =
React.createClass({



   render() {



    return (



         <Carousel width={375} indicatorColor="#ffffff"
inactiveIndicatorColor="#999999">



         <MyFirstPage />



         <MySecondPage />



         <MyThirdPage />



       </Carousel>



     );



   }



 });

下拉刷新组件 react-native-refreshable-listview

[react-native-refreshable-listview](http://www.oschina.net/p/react-native-
refreshable-listview)是下拉刷新 ListView，当数据重载的时候显示加载提示。

Modal 组件 react-native-modal

react-native-modal是 React
Native 的 <Modal 组件。

文本解析控件 react-native-htmltext

react-native-htmltext可以用
HTML 像 markup 一样在 ReactNative 里创建出相应效果的样式文本。ReactNative 为那些样式文本提供一个文本元素，用于取代
NSAttributedString，你可以创建嵌套的文本：

1
2
3
4
5
6
7
8
9
10
11
12
13
<Text style={{fontWeight: 'bold'}}>



   I am bold



   <Text style={{color: 'red'}}> and red </Text>



 </Text>

react-native-htmlview

react-native-htmlview是一个将
HTML 目录作为本地视图的控件，其风格可以定制。

LinearGradient 组件 react-native-linear-gradient

[react-native-linear-gradient](http://www.oschina.net/p/react-native-linear-
gradient)是一个 React Native 的 LinearGradient 组件。

双向循环播放 react-native-looped-carousel

[react-native-looped-carousel](http://www.oschina.net/p/react-native-looped-
carousel)是基于 React Native 的双向循环播放控件。

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
'use strict';var React = require('react-native');var Carousel = require
('react-native-looped-carousel');var Dimensions = require('Dimensions');var
{width, height} = Dimensions.get('window');var {



   AppRegistry,



   StyleSheet,  Text,



   View



 } = React;var carouselTest = React.createClass({  render: function() {
return (      <Carousel delay={500}>



           <View
style={{backgroundColor:'#BADA55',width:width,height:height}}/>



           <View style={{backgroundColor:'red',width:width,height:height}}/>



           <View style={{backgroundColor:'blue',width:width,height:height}}/>



       </Carousel>



     );



   }



 });



 AppRegistry.registerComponent('carouselTest', () = carouselTest);

Teaset

React Native UI 组件库

https://github.com/rilyu/teaset/blob/master/docs/cn/README.md

如果你知道其他 React Native 插件，在评论与大家分享一下吧～

ReactNative
5 分钟 读完 (大约 788 个字)

requestAnimationFrame帧动画

前言

动画是移动应用中的一个相当重要的组成部分，一个用户体验良好的应用通常都具有流畅、有意义的动画。类似原生平台，React
Native也为我们提供了丰富的动画API：requestAnimationFrame、LayoutAnimation、Animated。

requestAnimationFrame:帧动画，是最容易实现的一种动画，通过不断改变组件的state值，从而在视觉上产生一种动画的效果，类似于gif动画的方式。

LayoutAnimation:布局动画，当布局发生改变时的动画模块，允许在全局范围内创建和更新动画，这些动画会在下一次渲染或布局周期运行，实现单个动画非常简洁，体验和性能良好。

Animated:用于创建更精细的交互控制的动画，可进行多个动画的组合动画，具备极高的性能，是功能最强大的动画API。

本节我们先介绍requestAnimationFrame。

requestAnimationFrame帧动画的实现

requestAnimationFrame实现帧动画的原理非常粗暴简洁，即通过修改state值来不断得改变视图上的样式，从而在视觉上产生一种动画的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
import React, { Component } from'react';



 import {



 AppRegistry,



 StyleSheet,



 Text,



 View,



 TouchableOpacity,



 Platform,



 } from'react-native';



 exportdefaultclassFrameAnimationDemo extends Component {



 constructor(props){



 super(props);



 this.state = {



 width:200,



 height:20,



 };



 }



 _onPress() {



 //每按一次增加近30宽高



 varcount =0;



 while(++count<30){



 requestAnimationFrame(()={



 this.setState({



 width:this.state.width +1,



 height:this.state.height +1



 });



 })



 }



 }



 render() {



 return(



 <Viewstyle={styles.container}>




<Viewstyle={[styles.content,{width:this.state.width,height:this.state.height}]}>



 <Textstyle={[{textAlign:'center'}]}>Hello World!</Text>



 </View>



 <TouchableOpacitystyle={styles.content}onPress={this._onPress.bind(this)}>



 <Viewstyle={styles.button}>



 <Textstyle={styles.buttonText}Press me!></Text>



 </View>



 </TouchableOpacity>



 </View>



 );



 }



 }



 const styles = StyleSheet.create({



 container: {



 marginTop:25,



 flex: 1,



 },



 content: {



 backgroundColor: 'rgba(200, 230, 255, 0.8)',



 marginBottom:10,



 justifyContent:"center",



 alignSelf:"center",



 },



 button: Platform.select({



 ios: {},



 android: {



 elevation: 4,



 // Material design blue from https://material.google.com/style/color.html
#color-color-palette



 backgroundColor: '#2196F3',



 borderRadius: 2,



 width:100,



 height:30,



 },



 justifyContent:"center",



 alignSelf:"center",



 }),



 buttonText: {



 alignSelf:"center",



 }



 });

从效果上看动画有种一顿一顿的感觉。这是由于通过修改state值，导致频繁地销毁、重绘视图，内存开销大，从而使得动画卡顿明显。另外对于帧动画而言，如果帧数较少，动画的效果会比较生硬，帧数过多又会引发性能问题。

优化

如果帧动画的方式更符合当前对动画的控制方式，我们可以对上述方法做一点优化，在requestAnimationFrame中采用setNativeProps直接修改组件的属性并触发局部刷新，不会导致重绘组件，因此在性能上优于直接修改state的方法。

修改_onPress方法，将对this.setState的直接修改改为对”Hello
World”按钮的属性修改this.refs.view1.setNativeProps。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
_onPress() {



 varcount =0;



 while(++count<30){



 requestAnimationFrame(()={



 this.refs.view1.setNativeProps({



 style: {



 width:this.state.width++,



 height:this.state.height++



 }



 });



 });



 }



 }

this.refs.view1指向的是”Hello World”文字的父视图。

1
2
3
4
5
6
7
8
9
10
<View ref="view1"style={[styles.content, {width:this.state.width,
height:this.state.height}]}>



 <Textstyle={[{textAlign:'center'}]}>Hello World!</Text>



 </View>

通过对比可以看出流畅顺滑多了。

每个动画API都有其适应和不适应的场景，如果要实现“弹性动画”，“缓入缓出”等效果，使用requestAnimationFrame还是比较难的，需要辅助各种函数。下一节将介绍另一种动画API——LayoutAnimation。

GitHub地址

ReactNative
4 分钟 读完 (大约 572 个字)

React-Native-WebStorm代码模版

在React-
Native日常开发中，新建文件或者组件是最常用的操作。可是，在我们新建不同的文件或者组件时，一些代码固定不变，此时，需要重新写一遍就费事费力了，而最常用的操作就是复制，粘贴，修改，重复而无趣。若是不想重复如此无聊的机械动作，又想快速高效的来完成任务，编写代码，那怎么办呢？此时，解决方案出现了。–File
and Code Templates

使用此配置，可减省重复无用的劳动力，真正提升效率。

如果你觉得有用，请点个赞，或者分享给其他朋友。

一：配置有两种方式(以mac配置为例)：

一：

1-： 选择Preferences;

2-：搜索框输入Templates;

3-：点击File and Code Templates

4-：选中JavaScript File

5-：删除里面的代码，把以下代码复制进去(此代码可以自定义)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import React, { Component } from 'react';



 import {



   StyleSheet,



   Text,



   View,



   Image,



 } from 'react-native';



 export default class  ${NAME}  extends Component {



   render() {



     return (



       <View style={styles.container}>



  




       </View>



     );



   }



 }



 const styles = StyleSheet.create({



   container: {



     flex: 1,



   },



 });

6-：点击Apply

示例图如下：

二：

1-： 选择Preferences;

2-：搜索框输入Templates;

3-：点击File and Code Templates

4-：点击左上角“+”号按钮

示例图如下：

注意点：

1-：注意新建文件的名字，本例子中取名为:React-Native;

2-：注意Extension的输入框填写为js;

三：使用方式：

分为两种，与上面配置方式一一对应：

一：

1-：点击New ，选择Java Script File；

2-：输入新建文件的名字，并点击OK；

3-：查看新建文件内容为填写的模版内容

二：

1-：点击New ，选择React-Native文件类型(与使用第二中配置方式时新建的名字一一对应)；

2-：输入新建文件的名字，并点击OK；

3-：查看新建文件内容为填写的模版内容

四：使用效果截图：

关注我

分类

标签云

AR C# C#优化 Google JavaScript JavaScript优化 ReactNative ReactNative优化 ReactNative库 ReactNative插件 RxJs UML Unity Unity优化 Unity插件 VR Web Web优化 h5 npm 后端 图像 开源 数据库 架构 移动支付 网络 网络安全

最新文章

归档

标签

AR 1
C# 4
C#优化 2
Google 1
JavaScript 1
JavaScript优化 1
ReactNative 9
ReactNative优化 1
ReactNative库 6
ReactNative插件 1
RxJs 1
UML 1
Unity 31
Unity优化 24
Unity插件 26
VR 2
Web 11
Web优化 2
h5 1
npm 1
后端 6
图像 2
开源 1
数据库 2
架构 2
移动支付 2
网络 8
网络安全 3

最新文章

归档

标签

AR 1
C# 4
C#优化 2
Google 1
JavaScript 1
JavaScript优化 1
ReactNative 9
ReactNative优化 1
ReactNative库 6
ReactNative插件 1
RxJs 1
UML 1
Unity 31
Unity优化 24
Unity插件 26
VR 2
Web 11
Web优化 2
h5 1
npm 1
后端 6
图像 2
开源 1
数据库 2
架构 2
移动支付 2
网络 8
网络安全 3
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×