Command `bundle` unrecognized. Make sure that you have run `npm install` and that you are inside a react-native project.

呃呃，在寫下面的代碼時出現的問題，解決辦法是npm install或者yarn，如果yarn報錯，再npm install就可以了
下面的是攜程App首頁的樣式，有輪播，我沒有實現出來

代碼如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image,TouchableHighlight,ScrollView} from 'react-native';
// var Swiper= require('react-native-swipe');
// var sliderImgs = [
//     'http://images3.c-ctrip.com/SBU/apph5/201505/16/app_home_ad16_640_128.png',
//     'http://images3.c-ctrip.com/rk/apph5/C1/201505/app_home_ad49_640_128.png',
//     'http://images3.c-ctrip.com/rk/apph5/D1/201506/app_home_ad05_640_128.jpg'
//   ];
  var BUIcon = [
  'https://raw.githubusercontent.com/vczero/vczero.github.io/master/ctrip/%E6%9C%AA%E6%A0%87%E9%A2%98-1.png',
  'https://raw.githubusercontent.com/vczero/vczero.github.io/master/ctrip/feiji.png',
  'https://raw.githubusercontent.com/vczero/vczero.github.io/master/ctrip/lvyou.png',
  'https://raw.githubusercontent.com/vczero/vczero.github.io/master/ctrip/gonglue.png'
];
var Images = [
  'http://webresource.c-ctrip.com/ResCRMOnline/R5/html5/images/zzz_pic_salead01.png',
  'http://images3.c-ctrip.com/rk/apph5/B1/201505/app_home_ad06_310_120.jpg'
];
// var sliderImgs = [
//   'http://images3.c-ctrip.com/SBU/apph5/201505/16/app_home_ad16_640_128.png',
//   'http://images3.c-ctrip.com/rk/apph5/C1/201505/app_home_ad49_640_128.png',
//   'http://images3.c-ctrip.com/rk/apph5/D1/201506/app_home_ad05_640_128.jpg'
// ];

// class Slider extends Component {
//   rennder(){
//     return(
//        <Swiper style={styles.wrapper} showsButtons={false} autoplay={true} height={150} showsPagination={false}>
//           <Image style={[styles.slide,]} source={{uri: sliderImgs[0]}}></Image>
//           <Image style={[styles.slide,]} source={{uri: sliderImgs[1]}}></Image>
//           <Image style={[styles.slide,]} source={{uri: sliderImgs[2]}}></Image>
//         </Swiper>
//         );
//   }
// }
export default class App extends Component<Props> {
  
  render() {
    return (
      <ScrollView>
        <View style={styles.container}>
        
          <View style={[styles.sbu_view,styles.sub_red,]}>
              <View style={[styles.sbu_flex, styles.sbu_borderRight]}>
                <View style={[styles.sub_con_flex, styles.sub_text]}>
                  <Text style={[styles.font16]}>酒店</Text>
                </View>
                <View style={[styles.sub_con_flex]}>
                  <Image style={[styles.sbu_icon_img]} source={{uri:BUIcon[0]}}></Image>
                </View>
              </View>
           
            <View style={[styles.sbu_flex, styles.sbu_borderRight]}>
              <View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
                <Text style={[styles.font16]}>海外</Text>
              </View>
              <View style={[styles.sub_con_flex, styles.sub_text]}>
                <Text style={[styles.font16]}>周邊</Text>
              </View>
            </View>
            <View style={[styles.sbu_flex]}>
              <View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
                <Text style={[styles.font16]}>團購.特惠</Text>
              </View>
              <View style={[styles.sub_con_flex, styles.sub_text]}>
                <Text style={[styles.font16]}>客棧.公寓</Text>
              </View>
            </View>
          </View>

          <View style={[styles.sbu_view, styles.sbu_blue]}>
            <View style={[styles.sbu_flex, styles.sbu_borderRight]}>
              <View style={[styles.sub_con_flex, styles.sub_text]}>
                <Text style={[styles.font16]}>機票</Text>
              </View>
              <View style={[styles.sub_con_flex]}>
                <Image style={[styles.sbu_icon_img]} source={{uri:BUIcon[1]}}></Image>
              </View>
            </View>
            <View style={[styles.sbu_flex, styles.sbu_borderRight]}>
              <View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
                <Text style={[styles.font16]}>火車票</Text>
              </View>
              <View style={[styles.sub_con_flex, styles.sub_text]}>
                <Text style={[styles.font16]}>接收機</Text>
              </View>
            </View>
            <View style={[styles.sbu_flex]}>
              <View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
                <Text style={[styles.font16]}>汽車票</Text>
              </View>
              <View style={[styles.sub_con_flex, styles.sub_text]}>
                <Text style={[styles.font16]}>自駕.專車</Text>
              </View>
            </View>
          </View>

          <View style={[styles.sbu_view, styles.sbu_green]}>
            <View style={[styles.sbu_flex, styles.sbu_borderRight]}>
              <View style={[styles.sub_con_flex, styles.sub_text]}>
                <Text style={[styles.font16]}>旅游</Text>
              </View>
              <View style={[styles.sub_con_flex]}>
                <Image style={[styles.sbu_icon_img]} source={{uri:BUIcon[2]}}></Image>
              </View>
            </View>
            <View style={[styles.sbu_flex, styles.sbu_borderRight]}>
              <View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
                <Text style={[styles.font16]}>門票.玩樂</Text>
              </View>
              <View style={[styles.sub_con_flex, styles.sub_text]}>
                <Text style={[styles.font16]}>出境WiFi</Text>
              </View>
            </View>
            <View style={[styles.sbu_flex]}>
              <View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
                <Text style={[styles.font16]}>郵輪</Text>
              </View>
              <View style={[styles.sub_con_flex, styles.sub_text]}>
                <Text style={[styles.font16]}>簽證</Text>
              </View>
            </View>
          </View>
          <View style={[styles.sbu_view, styles.sbu_yellow]}>
            <View style={[styles.sbu_flex, styles.sbu_borderRight]}>
              <View style={[styles.sub_con_flex, styles.sub_text]}>
                <Text style={[styles.font16]}>攻略</Text>
              </View>
              <View style={[styles.sub_con_flex]}>
                <Image style={[styles.sbu_icon_img]} source={{uri:BUIcon[3]}}></Image>
              </View>
            </View>
            <View style={[styles.sbu_flex, styles.sbu_borderRight]}>
              <View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
                <Text style={[styles.font16]}>周末游</Text>
              </View>
              <View style={[styles.sub_con_flex, styles.sub_text]}>
                <Text style={[styles.font16]}>禮品卡</Text>
              </View>
            </View>
            <View style={[styles.sbu_flex]}>
              <View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
                <Text style={[styles.font16]}>美食.購物</Text>
              </View>
              <View style={[styles.sub_con_flex, styles.sub_text]}>
                <Text style={[styles.font16]}>更多</Text>
              </View>
            </View>
          </View>
          <View style={[styles.img_view]}>
            <View style={[styles.img_flex, {borderRightWidth:0.5}]}>
              <Image style={[styles.img_wh]} source={{uri:Images[0]}}></Image>
            </View>
            <View style={[styles.img_flex, {borderLeftWidth:0,}]}>
              <Image style={[styles.img_wh]} source={{uri:Images[1]}}></Image>
            </View>
          </View>
        </View>
        </ScrollView>
    );
  }
}


var styles=StyleSheet.create({
  container:{
    backgroundColor:'#F2F2F2',
    flex:1,
  },
  wrapper:{
    height:80,
    // resizeMode:Image.resizeMode.contain,
  },
  sbu_view:{
    height:84,
    marginLeft:5,
    marginRight:5,
    borderWidth:1,
    borderRadius:5,
    marginBottom:10,
    flexDirection:'row'
  },
  sub_red:{
    backgroundColor:'#FA6778',
    borderColor:'#FA6778',
    // marginTop:-70
  },
  sbu_blue:{
      backgroundColor: '#3D98FF',
      borderColor:'#3D98FF',
    },

    sbu_green:{
      backgroundColor: '#5EBE00',
      borderColor:'#5EBE00',
    },

    sbu_yellow:{
      backgroundColor: '#FC9720',
      borderColor:'#FC9720',
    },
    sbu_flex:{
      flex:1,
    },
    sbu_borderRight:{
      borderColor:'#fff',
      borderRightWidth: 0.5,
    },
    sbu_icon_img:{
      height:40,
      width:40,
      // resizeMode:Image.resizeMode.contain,
    },
    sub_con_flex:{
      flex:1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    sub_text:{
      justifyContent:'center',
    },
    font16:{
      fontSize:17,
      color:'#FFF',
      fontWeight:'900',
    },
    sbu_borderBottom:{
      borderBottomWidth:0.5,
      borderBottomColor:'#fff',
    },
    img_view:{
      height:62,
      marginLeft:5,
      marginRight:5,
      flexDirection: 'row',
      marginBottom:20,
      backgroundColor:'#fff',
    },
    img_flex:{
      flex:1,
      borderWidth:1,
      borderColor:'#ccc',
    },
    img_wh: {
      height:59,
      borderRightWidth:0,
      // resizeMode:Image.resizeMode.contain,
    }
})