React-Native入门指南

    二、分解内容

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

    四、图片轮播

    1. 这里图片轮播使用的是第三方组件react-native-swiper,当然React-Native是支持transform可以直接实现一套。我们启动npm命令行，在项目的根目录使用如下命令安装模块。
    3. $ npm install react-native-swiper --save
    4. $ npm install react-timer-mixin --save
    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/>

    六、样式类

    1. 说完了布局的原理，这里需要贴上样式仅供参考：
    2. var styles = StyleSheet.create({
    3. //container
    4.   container:{
    5.     flex:1,
    6.   },
    7.   //slider
    8.   wrapper: {
    9.     height:80,
    10.   },
    11.   slide: {
    13.     resizeMode: Image.resizeMode.contain,
    14.   },
    15.   //sbu
    16.   sbu_view:{
    17.       height:84,
    18.       marginLeft: 5,
    19.       marginRight:5,
    20.       borderWidth:1,
    21.       borderRadius:5,
    22.       marginBottom:10,
    23.       flexDirection:'row',
    24.   },
    25.   sbu_red:{
    26.       backgroundColor: '#FA6778',
    27.       borderColor:'#FA6778',
    28.       marginTop:-70,
    29.   },
    31.   sbu_blue:{
    32.       backgroundColor: '#3D98FF',
    33.       borderColor:'#3D98FF',
    34.   },
    36.   sbu_green:{
    37.       backgroundColor: '#5EBE00',
    38.       borderColor:'#5EBE00',
    39.   },
    41.   sbu_yellow:{
    42.       backgroundColor: '#FC9720',
    43.       borderColor:'#FC9720',
    44.   },
    45.   sbu_flex:{
    46.       flex:1,
    47.   },
    48.   sbu_borderRight:{
    49.       borderColor:'#fff',
    50.   },
    51.   sbu_icon_img:{
    53.       width:40,
    54.       resizeMode:Image.resizeMode.contain,
    55.   },
    56.   sub_con_flex:{
    57.       flex:1,
    58.       justifyContent: 'center',
    59.       alignItems: 'center',
    60.   },
    61.   sub_text:{
    62.       justifyContent:'center',
    63.   },
    64.   font16:{
    65.       fontSize:17,
    66.       color:'#FFF',
    67.       fontWeight:'900',
    68.   },
    69.   sbu_borderBottom:{
    70.       borderBottomWidth:0.5,
    71.       borderBottomColor:'#fff',
    72.   },
    73.   img_view:{
    74.       height:62,
    75.       marginLeft:5,
    76.       marginRight:5,
    77.       flexDirection: 'row',
    78.       marginBottom:20,
    79.       backgroundColor:'#fff',
    80.   },
    81.   img_flex:{
    82.       flex:1,
    83.       borderWidth:1,
    84.       borderColor:'#ccc',
    85.   },
    86.   img_wh: {
    87.       height:59,
    88.       borderRightWidth:0,
    89.       resizeMode:Image.resizeMode.contain,
    90.   }
    91. });
    1. 实例代码中会涉及ScrollView组件，主要是为了适应小屏的机器，可以滚动视图。