React-Native入门指南

第四篇React-Native布局实战(二)

1. 在不断深入的过程中，发现React-Native布局和样式的坑还有很多，他没有像浏览器那样灵活和有规律可循，其中的规律需要我自己踩坑的时候发现。比如：不存在zIndex,后面的元素覆盖前面的元素；内层元素覆盖外层元素等等,borderRadius的设置，需要考虑到内层元素的位置等等。

一、实战的内容

1. 这里选用携程的App首页作为栗子，随不是严格的9宫格(比9宫格稍微难点...)，但是可以很好的让我们练习flexbox.最后需要完成的结果如下：

'首页'

二、分解内容

1. 整个页面我们可以分为几个部分，大致如下：
  • 头部
  • 图片轮播
  • 9宫格
  • 底部活动

三、头部导航栏

1. 因为，组件还没有讲，这里只是做一个简单的介绍。在React-Native中实现头部导航栏很简单，只要使用NavigatorIOS组件即可。现在开工。

3. 1、我们在index.ios.js中添加如下代码；同时创建文件夹pagaes和pages下创建Index.js
4. var React = require('react-native');
5. var Index = require('./pages/Index');

7. var {
8. NavigatorIOS,
9. AppRegistry,
10. StyleSheet,
11. } = React;

13. var NV = React.createClass({
14. render: function(){
15. return(
16. <NavigatorIOS
17. style={styles.container}
18. initialRoute={{
19. title: '首页',
20. component: Index,
21. }}
22. />
23. );
24. }
25. });

27. var styles = StyleSheet.create({
28. container: {
29. flex: 1,
30. }
31. });

34. AppRegistry.registerComponent('HelloWorld', () => NV);

36. 分析代码：
37. （1）require：引入外部模块，就像，引入我们自己创建的/pages/Index.js一样。
38. （2）引入定义NavigatorIOS、AppRegistry、StyleSheet组件和类。
39. （3）在render中调用NavigatorIOS组件，initialRoute是初始化路由，title是当前页面的头部标题；component是当前路由下显示的组件；
40. （4）注意：这里NavigatorIOS的style需要设置大小，比如这里设置是flex：1，否则就不能显示内容主体；
41. （5）最后我们需要注册当前应用：AppRegistry.registerComponent('HelloWorld', () => NV);

43. 2、创建Index.js文件，文件的内容如下, module.exports就暴露了Index模块。

'Index' 效果如下图： '头部'

四、图片轮播

1. 这里图片轮播使用的是第三方组件react-native-swiper,当然React-Native是支持transform可以直接实现一套。我们启动npm命令行，在项目的根目录使用如下命令安装模块。

3. $ npm install react-native-swiper --save
4. $ npm install react-timer-mixin --save

(2)需要关闭React packager命令行和模拟器，在xcode中重启项目

1. 安装完成后，我们需要完成轮播功能。因为可以到github看看swiper暴露的接口和参数。github地址是：https://github.com/leecade/react-native-swiper

3. （1）引入swiper,前面也提到了require.
4. var Swiper = require('react-native-swiper');

6. （2）使用swiper,将轮播图封装成单独的组件
7. var sliderImgs = [
8. 'http://images3.c-ctrip.com/SBU/apph5/201505/16/app_home_ad16_640_128.png',
9. 'http://images3.c-ctrip.com/rk/apph5/C1/201505/app_home_ad49_640_128.png',
10. 'http://images3.c-ctrip.com/rk/apph5/D1/201506/app_home_ad05_640_128.jpg'
11. ];
12. var Slider = React.createClass({
13. render: function(){
14. return (
15. <Swiper style={styles.wrapper} showsButtons={false} autoplay={true} height={150} showsPagination={false}>
16. <Image style={[styles.slide,]} source={{uri: sliderImgs[0]}}></Image>
17. <Image style={[styles.slide,]} source={{uri: sliderImgs[1]}}></Image>
18. <Image style={[styles.slide,]} source={{uri: sliderImgs[2]}}></Image>
19. </Swiper>
20. );
21. }
22. });
23. (3)这样我们可以直接在render的时候直接用：<Slider/>

五、完成第一个9宫格布局，后面复制拷贝

1. 其实4个九宫格都是一样，这个其实可以封装成组件，这里采用拷贝的形式，开发一个，其他3个就ok的，不会偷懒的工程师，不是好工程师［偷笑］。分析下布局：
2. （1）其实首先是3个列在一行的布局，那么外层组件是需要flexDirection: 'row'，各占据宽度的1/3,即各自flex:1；
3. （2）每个列内又分两行， 需要每个行都是flex:1,各占据高度的一半；
4. （3）第一列是文字图片组合，其余都是文字组合；
5. （4）所有行内元素都是水平、垂直居中；
6. （5）这里使用了个TouchableHighlight组件，是为了出发onPress事件，类似于click或者touch事件。

8. <View style={[styles.sbu_red, styles.sbu_view]}>
9. <TouchableHighlight underlayColor={'#FA6778'} style={{flex:1}}>
10. <View style={[styles.sbu_flex, styles.sbu_borderRight]}>
11. <View style={[styles.sub_con_flex, styles.sub_text]}>
12. <Text style={[styles.font16]}>酒店</Text>
13. </View>
14. <View style={[styles.sub_con_flex]}>
15. <Image style={[styles.sbu_icon_img]} source={{uri:BUIcon[0]}}></Image>
16. </View>
17. </View>
18. </TouchableHighlight>
19. <View style={[styles.sbu_flex, styles.sbu_borderRight]}>
20. <View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
21. <Text style={[styles.font16]}>海外</Text>
22. </View>
23. <View style={[styles.sub_con_flex, styles.sub_text]}>
24. <Text style={[styles.font16]}>周边</Text>
25. </View>
26. </View>
27. <View style={[styles.sbu_flex]}>
28. <View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
29. <Text style={[styles.font16]}>团购.特惠</Text>
30. </View>
31. <View style={[styles.sub_con_flex, styles.sub_text]}>
32. <Text style={[styles.font16]}>客栈.公寓</Text>
33. </View>
34. </View>
35. </View>

六、样式类

1. 说完了布局的原理，这里需要贴上样式仅供参考：
2. var styles = StyleSheet.create({
3. //container
4. container:{
5. backgroundColor:'#F2F2F2',
6. flex:1,
7. },
8. //slider
9. wrapper: {
10. height:80,
11. },
12. slide: {
13. height:80,
14. resizeMode: Image.resizeMode.contain,
15. },
16. //sbu
17. sbu_view:{
18. height:84,
19. marginLeft: 5,
20. marginRight:5,
21. borderWidth:1,
22. borderRadius:5,
23. marginBottom:10,
24. flexDirection:'row',
25. },
26. sbu_red:{
27. backgroundColor: '#FA6778',
28. borderColor:'#FA6778',
29. marginTop:-70,
30. },

32. sbu_blue:{
33. backgroundColor: '#3D98FF',
34. borderColor:'#3D98FF',
35. },

37. sbu_green:{
38. backgroundColor: '#5EBE00',
39. borderColor:'#5EBE00',
40. },

42. sbu_yellow:{
43. backgroundColor: '#FC9720',
44. borderColor:'#FC9720',
45. },
46. sbu_flex:{
47. flex:1,
48. },
49. sbu_borderRight:{
50. borderColor:'#fff',
51. borderRightWidth: 0.5,
52. },
53. sbu_icon_img:{
54. height:40,
55. width:40,
56. resizeMode:Image.resizeMode.contain,
57. },
58. sub_con_flex:{
59. flex:1,
60. justifyContent: 'center',
61. alignItems: 'center',
62. },
63. sub_text:{
64. justifyContent:'center',
65. },
66. font16:{
67. fontSize:17,
68. color:'#FFF',
69. fontWeight:'900',
70. },
71. sbu_borderBottom:{
72. borderBottomWidth:0.5,
73. borderBottomColor:'#fff',
74. },
75. img_view:{
76. height:62,
77. marginLeft:5,
78. marginRight:5,
79. flexDirection: 'row',
80. marginBottom:20,
81. backgroundColor:'#fff',
82. },
83. img_flex:{
84. flex:1,
85. borderWidth:1,
86. borderColor:'#ccc',
87. },
88. img_wh: {
89. height:59,
90. borderRightWidth:0,
91. resizeMode:Image.resizeMode.contain,
92. }
93. });

95. 着重说下resizeMode:Image.resizeMode.contain。在React-Native中图片的大小是不会根据给定一个宽度或者高度而自适应大小的，因此我们需要让图片根据宽度或者高度来自适应，那么可以使用resizeMode:Image.resizeMode.contain。facebook提示错误信息的样式表中也没有提及，文档中也没有提及。所以后续还有不少的坑需要大家去一起探索。

七、Index.js整个代码，仅供参考

1. 实例代码中会涉及ScrollView组件，主要是为了适应小屏的机器，可以滚动视图。

代码链接：github