【React Native 安卓开发】----（View实战之仿携程）【第三篇】

这里讲一下RN中的View组件：
先看一下效果

下面是代码，可以直接copy：

后面会给大家一步一步讲解过程，与大家共同成长

import React, { Component } from 'react';
 import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  ScrollView,
  ListView,
  PixelRatio
} from 'react-native';

class hello extends Component{
  render(){
    return(
      <View style = {styles.flex}>
        <View style = {styles.container}>
            <View style = {[styles.item,styles.center]}>
              <Text style={styles.font}>酒店</Text>
            </View>
            <View style = {[styles.item,styles.lineLeft]}>
             
              <View style = {[styles.item_inner,styles.center,styles.lineBottom]}>
                <Text style={styles.font}>机票</Text>
              </View>
              <View style = {[styles.item_inner,styles.center]}>
                <Text style={styles.font}>火车票</Text>
              </View>

            </View>
            <View style = {[styles.item,styles.lineLeft]}>
              <View style = {[styles.item_inner,styles.center,styles.lineBottom]}>
                <Text style={styles.font}>旅游</Text>
              </View>
              <View style = {[styles.item_inner,styles.center]}>
                <Text style={styles.font}>攻略</Text>
              </View>
            </View>
        </View>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  container:{
    marginTop:200,
    marginLeft:5,
    marginRight:5,
    flexDirection:'row',
    padding:2,
    borderRadius:5,
    height:84,
    backgroundColor : '#ff0067'
  },
  item:{
    flex:1,
    height:80,
  },
  item_inner:{
    flex:1,
    height:40,
    
  },
  center:{
    justifyContent:'center',
    alignItems:'center'
  },
  flex:{
    flex :1
  },
  font:{
    color:'#ffffff',
    fontSize:16,
    fontWeight:'bold'
  },
  lineBottom:{
    borderBottomWidth:1/PixelRatio.get(),
    borderColor:'#ffffff'
  },
  lineLeft:{
    borderLeftWidth:1/PixelRatio.get(),
    borderColor:'#ffffff'
  }
});
AppRegistry.registerComponent('hello', () => hello);

下面让我们一步一步来分解：
#第一步
如图：我们可以想到先做三个View 这三个View使用FlexBox平分，flex都为1，这里的flex其实就相当于安卓里面的weight权重的概念。

class hello extends Component{
  render(){
    return(
      <View style = {{backgroundColor : '#ffffff'}}>
        <View style = {{backgroundColor : '#ff0067',height:80,flexDirection:'row'}}>
            <View style = {{flex:1,backgroundColor : '#ff00ff'}}>  
            </View>

            <View style = {{flex:1,backgroundColor : '#ffff00'}}>  
            </View>

            <View style = {{flex:1,backgroundColor : '#00ffff'}}>  
            </View>
        </View>
      </View>
    );
  }
};

#第二步
我们可以考虑到后面两个View里面也是flexBox，flexDirection为默认column.

class hello extends Component{
  render(){
    return(
      <View style = {{backgroundColor : '#ffffff'}}>
        <View style = {{backgroundColor : '#ff0067',height:80,flexDirection:'row'}}>
            <View style = {{flex:1,backgroundColor : '#ff00ff'}}>  
            </View>

            <View style = {{flex:1,backgroundColor : '#ffff00'}}>  
              <View style = {{flex:1,backgroundColor : '#0f11ff'}}>  
              </View>
              <View style = {{flex:1,backgroundColor : '#02f3ff'}}>  
              </View>
            </View>

            <View style = {{flex:1,backgroundColor : '#00ffff'}}>  
              <View style = {{flex:1,backgroundColor : '#ff110f'}}>  
              </View>
              <View style = {{flex:1,backgroundColor : '#f2f300'}}>  
              </View>
            </View>
        </View>
      </View>
    );
  }
};

#第三步
添加文字进去

class hello extends Component{
  render(){
    return(
      <View style = {{backgroundColor : '#ffffff'}}>
        <View style = {{backgroundColor : '#ff0067',height:80,flexDirection:'row'}}>
            <View style = {{flex:1,backgroundColor : '#ff00ff',justifyContent:'center',alignItems:'center'}}>  
              <Text style ={{color:'#ffffff',fontSize:16,fontWeight:'bold'}}>11111</Text>
            </View>

            <View style = {{flex:1,backgroundColor : '#ffff00'}}>  
              <View style = {{flex:1,backgroundColor : '#0f11ff',justifyContent:'center',alignItems:'center'}}> 
                <Text style ={{color:'#ffffff',fontSize:16,fontWeight:'bold'}}>22222</Text> 
              </View>
              <View style = {{flex:1,backgroundColor : '#02f3ff',justifyContent:'center',alignItems:'center',justifyContent:'center',alignItems:'center'}}>  
                <Text style ={{color:'#ffffff',fontSize:16,fontWeight:'bold'}}>33333</Text> 
              </View>
            </View>

            <View style = {{flex:1,backgroundColor : '#00ffff'}}>  
              <View style = {{flex:1,backgroundColor : '#ff110f',justifyContent:'center',alignItems:'center'}}>  
                <Text style ={{color:'#ffffff',fontSize:16,fontWeight:'bold'}}>44444</Text> 
              </View>
              <View style = {{flex:1,backgroundColor : '#f2f300',justifyContent:'center',alignItems:'center'}}>  
                <Text style ={{color:'#ffffff',fontSize:16,fontWeight:'bold'}}>55555</Text> 
              </View>
            </View>
        </View>
      </View>
    );
  }
};

现在代码看起来有点乱 不过基本效果有了 ，接下来我们把style提取出来，然后再加上一些处理就可以得到我们文章开头看到的效果了。是不是很酷炫。

这里在样式中用到了PixelRatio。
这个就是获取屏幕的设备像素比。window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips

dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

说道dp，安卓同学都应该很熟悉才对，这里就不过多介绍了。

扫码关注公众号“伟大程序猿的诞生“，更多干货新鲜文章等着你～

公众号回复“资料获取”，获取更多干货哦～

有问题添加本人微信号“fenghuokeji996” 或扫描博客导航栏本人二维码