render() {
const {style,textStyle,iconStyle,showIcon,icon,width} = this.props;
let textWrapStyle=width?{width:width,textAlign:"right"}:{};
let iconElem=String(showIcon).toLowerCase() ==="true"?(<Icon style={{width:'30rem',height:'30rem',marginLeft:'10rem'}} name='arrowDown' />):{};
return(
<TouchableHighlight onPress={this.pressHandler.bind(this)} value="" style={[sty.dropdown,style]}>
<view style={textWrapStyle}>
<Text style={[{fontSize:"28rem",color:"#666666",lines:1,textOverflow:'ellipsis'},textStyle]} textOverflow="true">{this.state.text}</Text>
</view>
{iconElem}
</TouchableHighlight>);
}
iconfont问题
import {createElement, Component,render} from 'rax';
import { View, Text, TouchableHighlight, Modal,Picker,Icon,Iconfont} from 'nuke';
import {Enum} from 'common/dp/index.jsx';
import sty from "./index.less"
class Dropdown extends Component {
constructor(props) {
super(props);
Iconfont({name:"iconfont1",url:"http://at.alicdn.com/t/font_1474198576_7440977.ttf"});
//初始化属性值
this.props.value=String(this.props.value);
let current=null;
//source 提出警告
if(!props.source.length){
throw new Error("warning:source is null")
};
this.enum=new Enum;
this.state = {}
//设置数据
this.setData(props);
}
setData(props){
this.enum.setEnum("source",props.source);
let current= props.value!=null?this.enum.getItemByKey("source",props.value):{};
this.state.text =current&¤t.value;
this.state.value =current&¤t.key;
}
static defaultProps = {
name:"",
source: [],
value: null,
onChange:(e)=>{ console.log("change")},
style:{},
showIcon:true,
icon:"arrowDown",
textStyle:{},
iconStyle:{},
width:null
}
pressHandler(){
var self=this;
Picker.show({title:'请选择',dataSource:this.props.source,maskClosable:true,selectedKey:this.state.value},
function(data){
let result=data.length&&data[0];
if(self.state.value!=result.key){
self.props.onChange(result)
}
self.setState({value:result.key,text:result.value})
});
}
render() {
const {style,textStyle,iconStyle,showIcon,icon,width} = this.props;
let textWrapStyle=width?{width:width,textAlign:"right"}:{};
let iconElem=String(showIcon).toLowerCase() ==="true"?(<Icon style={{width:'30rem',height:'30rem',marginLeft:'10rem'}} name='arrowDown' />):{};
let item= {"icon":"\ue600","name":"直播"};
return(
<TouchableHighlight onPress={this.pressHandler.bind(this)} value="" style={[sty.dropdown,style]}>
<view style={textWrapStyle}>
<Text style={[{fontSize:"28rem",color:"#666666",lines:1,textOverflow:'ellipsis'},textStyle]} textOverflow="true">{this.state.text}</Text>
</view>
{iconElem}
<View style={style.iconCell}>
<Text style={style.icon1}>{item.icon}</Text>
<Text style={style.iconCellText}>{item.name}</Text>
</View>
</TouchableHighlight>);
}
componentWillReceiveProps(nextProps){
this.setData(nextProps);
this.setState({});
}
}
const style={
iconCell:{
paddingLeft:'40rem',
paddingRight:'40rem'
},
icon1:{
fontFamily: 'iconfont1',
fontSize: '36rem',
marginBottom:'40rem',
color:'blue',
alignItems:'center'
},
iconCellText:{
fontSize: '20rem',
color:'#999999',
alignItems:'center'
}
}
export default Dropdown;
首先排查 Iconfont({name:"iconfont1",url:"http://at.alicdn.com/t/font_1474198576_7440977.ttf"});
iconfont项目汇总是否有\ue600
这个图标,是否是最新地址。看现象应该是图标没加载到,建议刷新看看
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。