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 (
            

              

            

                   
                  
                                            
                  
                              
            

                       

           
        )
    }
}

//样式
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.csdn.net/yuanguozhengjust/article/details/50538651