1.佈局

2.程式碼如下

/**
 * 掃碼框
 */
'use strict';

import React, {
    Component,
    Image,
    TextInput,
    View,
    Platform,
    StyleSheet
} from 'react-native';


//export 因為要在其他類中使用
export default class Header extends Component{
    render(){
        return (
           <View style={styles.container}> 

            <Image source={require('./images/header/header_logo.png')} style={styles.logo}/>  

            <View style={styles.searchBox}>

                 <Image source={require('./images/header/icon_search.png')} style={styles.searchIcon}/>  
                  
                 <TextInput style={styles.inputText}
                            keyboardType='web-search'  
                            placeholder='搜尋京東商品/店鋪' />                           
                  
                  <Image source={require('./images/header/icon_voice.png')} style={styles.voiceIcon}/>            
            </View>

            <Image source={require('./images/header/icon_qr.png')} style={styles.scanIcon}/>           

           </View>
        )
    }
}

//樣式
const styles = StyleSheet.create({  
    container: {  
        flexDirection: 'row',   // 水平排布  
        paddingLeft: 10,  
        paddingRight: 10,  
        paddingTop: Platform.OS === 'ios' ? 20 : 0,  // 處理iOS狀態列  
        height: Platform.OS === 'ios' ? 68 : 48,   // 處理iOS狀態列  
        backgroundColor: '#d74047',  
        alignItems: 'center'  // 使元素垂直居中排布, 當flexDirection為column時, 為水平居中  
    },  
    logo: {//圖片logo  
        height: 24,  
        width: 64,  
        resizeMode: 'stretch'  // 設定拉伸模式  
    },  
    searchBox:{//搜尋框
      height:30,
      flexDirection: 'row',   // 水平排布  
      flex:1,
      borderRadius: 5,  // 設定圓角邊  
      backgroundColor: 'white',
      alignItems: 'center',
      marginLeft: 8,  
      marginRight: 8,  
    },
    searchIcon: {//搜尋圖示  
        height: 20,  
        width: 20, 
        marginLeft: 5,  
        resizeMode: 'stretch'  
    }, 
    inputText:{
      flex:1,
      backgroundColor:'transparent',
      fontSize:15,
    },
    voiceIcon: {  
        marginLeft: 5,  
        marginRight: 8,  
        width: 15,  
        height: 20,  
        resizeMode: 'stretch'  
    }, 
    scanIcon: {//搜尋圖示  
        height: 26.7,  
        width: 26.7,  
        resizeMode: 'stretch'  
    }, 
});