react-native-icons 字体图标插件

下载

在项目的根目录下执行npm install react-native-icons@latest --save,下载完成后可以在node_modules目录下看到该插件:

这里写图片描述

配置

目前只支持iOS,所以只有xcode的配置:

导入ReactNativeIcons.xcodeproj

1.项目Libraries上右键:

这里写图片描述

添加项目根目录下的node_modules/react-native-icons/ios/ReactNativeIcons.xcodeproj
2.引用libReactNativeIcons.a:
单机项目,在右面的面板中选择Build Phases下的Link Binary With Libraries,点击+号添加库:
这里写图片描述
这里写图片描述

3.添加ttf文件:
这个地方要注意,github上直说了引用node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit文件夹,但是主要的还是4个ttf文件:

单机项目,在右面的面板中选择Build PhasesCopy Bundle Resources选择+号,在出现的文件选择器中点击Add Other...,定位到node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit目录下,把所有的ttf文件和otf都勾选上:

这里写图片描述
这里写图片描述
这里写图片描述

Import

要想使用react-native-icons,需要在代码中添加如下语句:

 var {
   Icon,
 } = require('react-native-icons');
  • 1
  • 2
  • 3

选择图标

类别 图标数量 引用名
FontAwesome 4.4 585 fontawesome
ionicons 2.0.0 733 ion
Foundation icons 283 foundation
Zocial 99 zocial
Material design icons 744 material

实例

我们在FontAwesome4.4网站上找了一个apple图标:

这里写图片描述

怎么用呢?看下面代码:

 'use strict';

 var React = require('react-native');
 var {
   Icon,
 } = require('react-native-icons');
 var {
   AppRegistry,
   StyleSheet,
   View,
 } = React;

 var TesterHome = React.createClass({
   render() {
     return ( < Icon name = 'fontawesome|apple'
       size = {
         150
       }
       style = {
         styles.beer
       }
       />


     );
   }
 });

 var styles = StyleSheet.create({
   container: {
     flex: 1,
   },
   beer: {
     width: 150,
     height: 150,
   }
 });
 AppRegistry.registerComponent('TesterHome', () => TesterHome);

核心代码是fontawesome|apple就是这么简单.所以的引用都是库名的引用名|图标的名称

react native TypeError network request failed

react native TypeError network request failed

异常出现的原因:由IOS9引入的新特性造成的。iOS9引入了App Transport Security (ATS)。这个新特性要求App内部访问网络必须使用Https协议。而我的项目使用的是Htttp协议。所以就报以上错误了。

解决方法是在项目中的info.plist文件中添加,App Transport Security Settings,然后再下面添加Allow Arbitrary Loads并把其boolean值设置为YES

Screen用法

1.安装Screen

大多数情况下,系统已经安装好了screen。如果没有,可以用下面的命令来安装:

CentOS系统中执行:yum install screen
Debian/Ubuntu系统执行:apt-get install screen

2.常用命令

screen的说明相当复杂,反正我是看得头晕了。但事实上,我们只需要掌握下面五个命令就足够我们使用了:

screen -S test    #创建一个名为test的会话

screen -ls            #列出所有会话

screen -d test    #卸载名为test的会话,但会话中的任务会继续执行。

screen -r test      #恢复名为test的会话

exit                    #退出当前窗口

3.常用快捷键

Ctrl+a c :在当前screen会话中创建窗口

Ctrl+a d  : 效果与screen -d相同,卸载当前会话

Ctrl+a w :显示当前会话中的窗口列表,显示在标题栏中

Ctrl+a n :切换到下一个窗口

Ctrl+a p :切换到上一个窗口

Ctrl+a 0-9 :在第0个窗口和第9个窗口之间切换

说明:这里的快捷键由三个键组成,如Ctrl+a c,你可以按住Ctrl键,再依次按下a和c。也可以先按一次Ctrl+a,再按一次Ctrl+c。两种方法都是可行的。

4.使用实例

看着上面罗列的命令和快捷键是不是觉得头晕,没关系,我们还是用一个实例最能说明问题,假设我们要同时执行下面三个个任务:给系统升级,下载一个文件,ping谷歌的域名。

a.先执行screen -S update创建一个名为update的会话。该会话会自动创建一个窗口,在这个窗口中执行系统升级命令yum update -y。如图一所示,注意Putty窗口标题栏中的[screen 0: bash]代表这是第一个窗口(从0开始计数),执行的是bash。

图一:执行yum -update -y

b.按快捷键Ctrl+a c,在当前会话中创建一个新的窗口,然后我们执行wget http://cachefly.cachefly.net/100mb.test,如图二所示,此时Putty窗口的标题栏中显示的是[screen 1: bash],代表这是第二个窗口,执行的也是bash。快捷键Ctrl+a w会在标题栏显示该会话中有哪些窗口。快捷键Crrl+a n或者Ctrl a+p可以在不同窗口之间切换。

图二:执行wget

c.一个会话中可以创建N个窗口,现在假设我们想另外创建一个会话来执行第三个任务。按快捷键Ctrl+a d(也可以执行screen -d update)卸载当前加载的update会话(但该会话中执行的两个任务任然正常运行,相当于被转成了后台进程),然后执行screen,创建一个新的会话(因为此时我们没有使用-S参数指定新创建会话的名字,则screen会按照它的命名规则来命名新的会话,可以参见下面screen -ls命令的执行结果)。现在我们执行ping -c 5 www.linuxidc.com。

d.执行screen -ls可以查看当前所有的会话,如图三所示,可以看到目前有两个会话22080.update和22102.pts-0.hawstname604,其中22080和22102分别是这两个会话的PID,当我们调用screen -r,screen -d等命令时,可以用这个PID代替会话的名字,如screen -d update与screen -d 22080是等效的。会话后面的(Attached)代表该会话已经被加载,(Detached)表示该会话已被卸载。

图三:第一次执行screen -ls

e.执行exit退出当前窗口。当一个会话中的所有窗口都被结束,则该会话会被自动终止,命令行会提示[screen is terminating]。此时再执行screen -ls,会显示只有一个22080.update会话,且处于(Detached)状态,如图四所示。

图四:第二次执行screen -ls

f.执行screen -r update重新加载update会话。可以继续查看前两个任务的执行情况,我们甚至可以中断当前SSH连接,重新连接之后依然可以看到这两个任执行。

就写到这儿了吧,更多关于screen的用法可以参见man screen。说实话,screen是一款功能非常强大的工具,但与此同时,它的帮助文档也写的非常复杂,反正我是看得头晕了,所以才有了这么一篇文章,希望对大家能够有所帮助。

React JSX内部判断等写法

React JSX内部写判断语法,三元表达式不好写的可以这么写

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {
    (function(obj){
        if(obj.props.name)
          return obj.props.name
        else
          return "World"
      }(this))
    }</div>;
  }
});
ReactDOM.render(<HelloMessage name="xiaowang" />, document.body);

React 解析html内容

使用dangerouslySetInnerHTML={{__html: page}}解析html内容

render:function(){
    var page=this.state.data.show;
    console.log(page);
      return (
      <div>
            <ul>
            </ul>
          {page}
          <div dangerouslySetInnerHTML={{__html: page}} />
      </div>
);

 

php随机生成MAC地址

php随机生成MAC地址代码,前三个为固定mac头,根据要用的更改

function mac_gen(){
	$array=array(
		0x1C,
		0x1C,
		0x1C,
		mt_rand(0x00, 0x7f),
		mt_rand(0x00, 0xff),
		mt_rand(0x00, 0xff)
	);
	return join(':',array_map(function($v){
		return sprintf("%02X",$v);
	},$array));
}

React解决模态框子组件不自动更新问题

解决方案:每次点击打开模态框的时候为,当前模态框设置一个独立的key值,代码如下:

测试模态框加key,使用id获取出问题,要更改为给未更新子组件加key值

  /*
   * 上传文件的模块框控制
   * */
  showFileModal = () => {
    this.setState({
      fileVisible: true,
    });
    this.setState({myKey: Math.random()});

  };


//组件代码
 <Modal
          width={760}
          key = {this.state.myKey}
          title="上传文档"
          visible={this.state.fileVisible}
          onOk={this.handleOkFile}
          onCancel={this.handleCancelFile}
        >
          <div>
            <Row>
              <a href="xxxxxx.xlsx">
                <Button className=‘cq-btn‘>下载上传模板</Button>
              </a>
            </Row>
            <Dragger {...fileUploadProps}>
              <p className="ant-upload-drag-icon">
                <Icon type="inbox"/>
              </p>
              <p className="ant-upload-text">点击excel或将excel文件拖拽到此区域上传</p>
            </Dragger>

            <RadioGroup onChange={this.onChange} value={this.state.value}>
              <Radio value={0}>全量</Radio>
              <Radio value={1} >增量</Radio>
            </RadioGroup>
            {resultMessage}
          </div>

        </Modal>