ReactNative Demo - 仿携程UI Demo

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



  class AwesomeProject extends Component {


    render() {

      return (
        
          
          
            
            
              酒店
            

            
               
                海外酒店
               
               
                  优惠酒店

               
            
            
           
            
               
                  团购
               
               
                  客栈，公寓

               
            

         
          
      
       
      );


    }
  }

  const styles = StyleSheet.create({
    flex: {
      flex:1,
    },

    container: {
      marginRight: 5,
      marginLeft: 5,
      marginTop: 200,
      flexDirection: 'row',
      backgroundColor: '#fff',
      backgroundColor: '#ff0067',
      borderColor:'red',
      padding:2,
      borderRadius: 5,
      height:84,


    },

    lineLeftRight: {
      borderLeftWidth: 1/PixelRatio.get(),
      borderRightWidth: 1/PixelRatio.get(),
      borderColor: '#fff',
    },

    font:{
      fontSize:16,
      color: 'white',
      fontWeight: 'bold',
    },

    lineCenter:{
      borderBottomWidth:1/PixelRatio.get(),
      borderColor: '#fff'
    },
    item:{
      flex: 1,
      height: 80,
      
    },

    center: {
      justifyContent: 'center',
      alignItems: 'center',
    },
    
  });

  AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

转载请注明出处:http://www.jianshu.com/u/c864df301e25