ios,iconfont不显示-问答-阿里云开发者社区-阿里云

开发者社区> a6bfe36a7a3> 正文

ios,iconfont不显示

2017-05-03 10:07:10 5082 1

IMG_0255

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&&current.value;
  this.state.value =current&&current.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;

取消 提交回答
全部回答(1)
  • 栢里
    2019-07-17 21:07:54

    首先排查 Iconfont({name:"iconfont1",url:"http://at.alicdn.com/t/font_1474198576_7440977.ttf"}); iconfont项目汇总是否有\ue600这个图标,是否是最新地址。看现象应该是图标没加载到,建议刷新看看

    0 0
相关问答

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 56716浏览量 回答数 19

11

回答

iphone设置阿里云邮箱的步骤

minioba 2013-04-24 22:04:37 101678浏览量 回答数 11

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 92835浏览量 回答数 28

42

回答

什么是云主机,云服务器与vps有什么区别?

zhuangdengyun 2011-11-01 04:21:50 49552浏览量 回答数 42

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 145588浏览量 回答数 31

58

回答

技术入门问答集锦,涉及多种技术方向,解决新人学习困惑

管理贝贝 2016-08-03 10:13:27 52432浏览量 回答数 58

249

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 302568浏览量 回答数 249

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80096浏览量 回答数 13

46

回答

H5技术百问——不懂H5你就OUT啦

yq传送门 2017-09-09 11:03:04 47031浏览量 回答数 46

2

回答

Nginx—owncloud安装记事

寒喵 2014-06-07 23:24:41 48509浏览量 回答数 2
+关注
0
文章
1
问答
推荐问答
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载