从零开始学习React Native，先重布局开始学起

React Native布局学习，模仿携程的首页内容，可以很好的让我们练习一下flexbox布局，最后完成的效果图如下：

附上Github地址，欢迎star

一、布局主要内容如下：

1、搜索栏的布局
2、图片轮播
3、类似九宫格的布局
4、图片、文字混合布局
5、底部布局

主要使用的控件

StyleSheet
Text
PixelRatio
ScrollView
Image
View
TextInput

记得导出与引用

导出单独的样式

module.exports= Search;

在主文件中使用

const Search = require('./search');

二、搜索栏布局实现

class Search extends Component {
  render() {
    return (
      
        
          
          
          
        
        
          
        
      
    );
  }

具体的样式见源代码。

三、图片轮播

这里使用了开源的组件react-native-swiper
Github项目地址，里面有具体的使用介绍
记得安装完后，重新启动一下package,不然会报错
下面是安装的代码，具体见Github

$ npm i react-native-swiper --save

}
                  scrollsToTop={true}
              >
            
            
            
            
            
          

具体的样式见源代码。

四、类似九宫格的布局

            

              
                酒店
              

              
                
              

            

            

              
                海外酒店
              

              
                特惠酒店
              

            

            

              
                团购
              

              
                民宿·客栈
              

            
          

具体的样式见源代码。

五、图片、文字混合布局

              
                
                
                  
                    美食之旅·呼和浩特+希拉穆仁草原+响沙湾+鄂尔多斯...
                  

                  
                    
                      ¥2899起
                    

                    
                      
                        省¥1100
                      
                    
                  
                
              


              

                
                  
                    
                      千款特价
                    
                    
                      走过路过不错过
                    
                  

                  
                    
                  
                

                
                  
                    
                      海外精选
                    
                    
                      百元出境游
                    
                    
                  

                  
                    
                      周边玩乐
                    
                    
                      十元度周末
                    
                    
                  
                

              

            
          

具体的样式见源代码。

六、底部布局

class Tab extends Component {
  render() {
    return (
      
        
          
          首页
        

        
          
          行程
        

        
          
          客服
        

        
          
          我的
        
      
    );
  }

具体的样式见源代码。