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,width: 15,height: 20,scanIcon: {//搜索图标  
        height: 26.7,width: 26.7,}); 

3.注意事项

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

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

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

转载出处： http://www.52php.cn/article/p-wlytzwso-bgm.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!