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

来源：互联网发布：sketchar软件下载编辑：程序博客网时间：2024/05/16 00:45

这里讲一下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，安卓同学都应该很熟悉才对，这里就不过多介绍了。

9 0