React-Native入门指南——第4篇react-native布局实战（二）

React-Native入门指南

github:https://github.com/vczero/react-native-lession

React-Native:用JavaScript开发你的原生应用，释放Native的UI体验，体验 Hybird开发效率。

最近一个星期写的文章以下，连接是github page的，其实也能够在系列博客找到相应文章：

• Lession1: Hello React-Native
• Lession2: 认识代码结构
• Lession3: css和布局
• Lession4: 学会React-Native布局（一）
• Lession5: 学会React-Native布局(二)
• Lession6: UI组件
• Lession7: JSX在React-Native中的应用

还有几篇会时刻更新：

• Lession8: 本身动手写组件
• Lession9: 模块化开发
• Lession10: 搭建项目架构
• Lession11: 源码分析

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

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

1、实战的内容

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

2、分解内容

整个页面咱们能够分为几个部分，大体以下：

• 头部
• 图片轮播
• 9宫格
• 底部活动

3、头部导航栏

由于，组件尚未讲，这里只是作一个简单的介绍。在React-Native中实现头部导航栏很简单，只要使用NavigatorIOS组件便可。如今开工。

一、咱们在index.ios.js中添加以下代码；同时建立文件夹pagaes和pages下建立Index.js
var React = require('react-native');
var Index = require('./pages/Index');

var {
    NavigatorIOS,
    AppRegistry,
    StyleSheet,
} = React;

var NV = React.createClass({
    render: function(){
        return(
            <NavigatorIOS
                style={styles.container}
                initialRoute={{
                    title: '首页',
                    component: Index,
                }}
            />
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});


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

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

 二、建立Index.js文件，文件的内容以下, module.exports就暴露了Index模块。

 

效果以下图：

 

4、图片轮播

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

$ npm react-native-swiper --save

安装完成后，咱们须要完成轮播功能。由于能够到github看看swiper暴露的接口和参数。github地址是：https://github.com/leecade/react-native-swiper

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

（2）使用swiper,将轮播图封装成单独的组件
var sliderImgs = [
    'http://images3.c-ctrip.com/SBU/apph5/201505/16/app_home_ad16_640_128.png',
    'http://images3.c-ctrip.com/rk/apph5/C1/201505/app_home_ad49_640_128.png',
    'http://images3.c-ctrip.com/rk/apph5/D1/201506/app_home_ad05_640_128.jpg'
];
var Slider = React.createClass({
    render: function(){
    return (
      <Swiper style={styles.wrapper} showsButtons={false} autoplay={true} height={150} showsPagination={false}>
        <Image style={[styles.slide,]} source={{uri: sliderImgs[0]}}></Image>
        <Image style={[styles.slide,]} source={{uri: sliderImgs[1]}}></Image>
        <Image style={[styles.slide,]} source={{uri: sliderImgs[2]}}></Image>
      </Swiper>
    );
  }
});
(3)这样咱们能够直接在render的时候直接用：<Slider/>

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

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

        <View style={[styles.sbu_red, styles.sbu_view]}>
        <TouchableHighlight underlayColor={'#FA6778'} style={{flex:1}}>
            <View style={[styles.sbu_flex, styles.sbu_borderRight]}>
                <View style={[styles.sub_con_flex, styles.sub_text]}>
                    <Text style={[styles.font16]}>酒店</Text>
                </View>
                <View style={[styles.sub_con_flex]}>
                    <Image style={[styles.sbu_icon_img]} source={{uri:BUIcon[0]}}></Image>
                </View>
            </View>
        </TouchableHighlight>
        <View style={[styles.sbu_flex, styles.sbu_borderRight]}>
            <View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
                <Text style={[styles.font16]}>海外</Text>
            </View>
            <View style={[styles.sub_con_flex, styles.sub_text]}>
                <Text style={[styles.font16]}>周边</Text>
            </View>
        </View>
        <View style={[styles.sbu_flex]}>
            <View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
                <Text style={[styles.font16]}>团购.特惠</Text>
            </View>
            <View style={[styles.sub_con_flex, styles.sub_text]}>
                <Text style={[styles.font16]}>客栈.公寓</Text>
            </View>
        </View>
    </View>

6、样式类

说完了布局的原理，这里须要贴上样式仅供参考：
var styles = StyleSheet.create({
//container
container:{
    backgroundColor:'#F2F2F2',
    flex:1,
},
//slider
wrapper: {
    height:80,
},
slide: {
    height:80,
    resizeMode: Image.resizeMode.contain,
},
//sbu
sbu_view:{
    height:84,
    marginLeft: 5,
    marginRight:5,
    borderWidth:1,
    borderRadius:5,
    marginBottom:10,
    flexDirection:'row',
},
sbu_red:{
    backgroundColor: '#FA6778',
    borderColor:'#FA6778',
    marginTop:-70,
},

sbu_blue:{
    backgroundColor: '#3D98FF',
    borderColor:'#3D98FF',
},

sbu_green:{
    backgroundColor: '#5EBE00',
    borderColor:'#5EBE00',
},

sbu_yellow:{
    backgroundColor: '#FC9720',
    borderColor:'#FC9720',
},
sbu_flex:{
    flex:1,
},
sbu_borderRight:{
    borderColor:'#fff',
    borderRightWidth: 0.5,
},
sbu_icon_img:{
    height:40,
    width:40,
    resizeMode:Image.resizeMode.contain,
},
sub_con_flex:{
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
},
sub_text:{
    justifyContent:'center',
},
font16:{
    fontSize:17,
    color:'#FFF',
    fontWeight:'900',
},
sbu_borderBottom:{
    borderBottomWidth:0.5,
    borderBottomColor:'#fff',
},
img_view:{
    height:62,
    marginLeft:5,
    marginRight:5,
    flexDirection: 'row',
    marginBottom:20,
    backgroundColor:'#fff',
},
img_flex:{
    flex:1,
    borderWidth:1,
    borderColor:'#ccc',
},
img_wh: {
    height:59,
    borderRightWidth:0,
    resizeMode:Image.resizeMode.contain,
}
});

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

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

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

代码连接：github