ReactNative学习八－搜索栏的基本布局

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'  
    }, 
}); 

3.注意事项

1.style的使用，当使用StyleSheet创建的样式时，外层只需要一层{}，而直接声明需要再加一层，即直接声明了匿名变量

2.Image的source可以使用网络图片或本地资源，使用本地资源时，类似require.js的包引用，而使用网络资源时，使用方法如下：source={{uri:'http://xxxxxxx'}}

3.TextInput的键盘类型可以使用keyboardType进行设置，占位字符使用placeholder设置，具体请参见官方文档

转载出处： http://blog.youkuaiyun.com/yuanguozhengjust/article/details/50538651