三七二十几-CSDN博客

原创阻止事件冒泡和默认事件行为

停止冒泡：function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则，我们需要使用IE的方式来取消事件冒泡 win...

2018-10-25 17:21:50 266

原创 React Native 切换tab导航不重新渲染问题（用于登录状态改变重新加载tab）

import { NavigationActions, StackActions } from 'react-navigation';const resetAction = StackActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName: 'Tabs'...

2018-08-01 14:41:55 4753 1

原创 React Native 更改app图标和名称

1 安卓:图标: 将logo拖到app icon gear中生成四个规格的图标,分别放到android/app/src/main/res 下的四个文件夹中,命名为ic_launcher.png 没有对应上的文件夹放一张1024*1024 或者512*512的即可app名称: 在android/app/src/main/res/values/strings.xml ...

2018-07-19 17:25:48 4434 1

原创 pick一些常用命令

1 新建react项目： create-react-app 项目名 cd 项目 npm start npm run build2 新建RN项目： react-native init AwesomeProject cd AwesomeProject react-native run-ios3 RN指定模拟器型号运行： react...

2018-07-19 17:21:42 661

原创 git忽略文件 .gitignore

OSX# .DS_StoreXcode# build/ *.pbxuser !default.pbxuser *.mode1v3 !default.mode1v3 *.mode2v3 !default.mode2v3 *.perspectivev3 !default.perspectivev3 xcuserdata *.xccheckout *.moved...

2018-07-19 16:07:15 535

原创时间戳转化为时间

export const getTime = time => { if (time < 10) { return `0${time}` } else { return time }}export const format = (date) => { var time = new Date(date * 1000...

2018-07-19 15:41:10 1660

原创 React Native 判断设备是否为iphoneX

import { Dimensions, Platform} from 'react-native'let screenW = Dimensions.get('window').width;let screenH = Dimensions.get('window').height;// iPhoneXconst X_WIDTH = 375const X_HEIGHT = 812ex...

2018-07-19 15:13:52 3744 1

原创 react native 解决键盘弹起遮挡输入框问题

问题:使用Textinput组件时,ios模拟器软键盘弹出会遮挡住输入框.如何调出软键盘: 解决思路:(其他情况类似) 1、Textinput在ScrollView中当弹出软键盘时,计算软键盘的高度,state设置ScrollView的paddingBottom值加上软键盘的高度 2、Textinput固定在屏幕底部当弹出软键盘时,计算软键盘的高度,state设置Textin...

2018-07-13 14:36:08 4704 1

原创 react native 使用textinput时安卓tabbar会被顶起

解决方法(简单不粗暴): 在android/app/app/src/main/AndroidManifest.xml中,在activity标签中添加下面代码<activityandroid:windowSoftInputMode="stateAlwaysHidden|adjustPan|adjustResize">...

2018-06-21 09:42:51 1290

原创如何在一组对象数组中筛选出相同key值的成员

例如: ObjArr => ArrObjObjArr=[{key:1,value:'apple'},{key:2,value:'banana'},{key:1,value:'orange'},{key:2,value:'peach'}]ArrObj={1:[{key:1,value:'apple'},{key:1,value:'orange'}],2:[{key:...

2018-06-13 08:47:46 8401

原创签到日历

日历格式判断当前月份多少天以及第一天星期几用于签到日历样式export function SignDate() { let nowDate = new Date() let y = nowDate.getFullYear() let mon = nowDate.getMonth()+1 //顶部标题样式 let title = y+'年'+mon+'月' ...

2018-06-07 08:54:09 742

原创 react native 中ScrollView 滚动显示不全问题

使用ScrollView的时候,遇到一个问题,里面的内容靠下的部分需要用力拉才能看见,一松开又弹回去了(原谅我拙劣的叙述,不知道用什么样的专业术语)看了官网的解释才知道原因:ScrollView 的功能就是把其包含的不确定高度的内容通过滚动操作在一个固定高度的窗口显示,所以ScrollView必须有一个确定的高度才能正常工作!!!要给一个ScrollView确定一个高度的话，要...

2018-06-01 11:05:58 6884

原创 React Native 使用百度地图 react-native-baidu-map组件时遇到的问题

React Native 使用百度地图 react-native-baidu-map组件时遇到的问题1、error: Redefinition of ‘RCTMethodInfo’ 解决:修改 react-native-baidu-map包文件 2、error: 解决:添加mapapi.bundle 3、error: 解决: ...

2018-05-29 11:47:05 2987

原创总结几个对象转数组的方法

目标效果：obj = { 0: 'a', 1: 'b', 2: 'c' }=> ayy=['a','b','c']1、Array.from(object) 注： 1️⃣ object中必须有length属性，返回的数组长度取决于length长度 2️⃣ key 值必须是数值2、Object.values(object) 注：与第一种不同的...

2018-05-19 23:52:41 40594 1

原创 react 中使用canvas 实现圆角圆环

echarts 暂时不支持圆角的圆环下面是封装的组件源码:import React, { Component } from 'react';export class CanvasDemo extends React.Component { constructor(props) { super(props) this.initCanvas = this.initC...

2018-05-14 09:49:38 8372 2

原创 React-Native中tab切换在安卓中的样式问题

1.去掉安卓下的下划线，设置：tabBarOptions =&gt; indicatorStyle:{ height: 0 }；2.底部导航在导航最上方添加一条分割线，设置： tabBarOptions =&gt; style {borderTopWidth: 0.5, borderTopColor: ‘#ccc’}3.导航安卓图标和文字间隙比较大，手动调整小设置： tabBarOpt...

2018-05-04 17:28:54 679

原创 React-Native 安卓真机调试和打包过程问题记录（MAC）

一、无adb命令：adb devices adb: command not found]解决：配置Android环境变量 1. 打开mac的terminal终端，输入 cd ~/ 【进入当前用户的home目录】 2. 输入 touch .bash_profile 【如果没有.bash_profile这个文件，则创建一个这个文件】 3. 输入 open .bash_profi...

2018-05-04 14:46:57 1175 2

原创 react native 使用navigation进行页面反向传值（亲测有效）

navigation正向传值很简单：页面1到页面2，在页面1中设置this.props.navigation.navigate('页面2'，{info:info})反向传值：从页面2到页面1传值，需要利用回调函数，也就是页面1传递给页面2一个回调函数，在页面2中调用这个函数，通过这个函数对页面1进行setState，从而进行页面的重新渲染。页面1中：this.props.n...

2018-04-30 15:47:25 2801 1

常用命令1、将本地项目变成git可以管理的仓库 --- git init2、将文件添加到暂存区（git add . ---添加目录中所有文件）--- git add 文件名 3、将文件从暂存区提交到仓库 --- git commit -m ‘注释’4、查看文件修改的具体内容 --- git diff 文件名 5、查看文件更改历史记录 --- git log（git log --pretty=on...

2018-04-26 22:56:14 163

原创 RN中使用渐变组件react-native-linear-gradient遇到的问题

RN中设置颜色渐变，需要用到react-native-linear-gradient，按照官网的步骤：1、npm install react-native-linear-gradient --save2、react-native link然后引入到界面(依赖BVLinearGraient)import LinearGradient from 'react-native-linear-gradien...

2018-04-18 15:00:58 8074

原创 react-native ---遇到的问题汇总

1、新建的项目总是跑不起来。。。今天同事给个项目，下载下来npm install后一堆问题，大概就是路径出问题了xcrun: error: active developer path ("/Users/XJW/Desktop/Xcode.app/Contents/Developer") does not exist, use `xcode-select --switch path/to/Xcode...

2018-04-08 09:53:01 1775

原创 react-native 学习笔记1---创建与运行项目

学习这件事就是一件不停的踩坑、填坑的过程。最近开始学习react-native，从创建项目开始，本以为有前辈们的提醒，可以少踩坑，如履平地的往前走，但是有些坑如果不去踩一下人生是不完整的。。。接下来我也记录下自己踩过的坑吧首先是搭建环境，这个官方文档已经说的很详细了，pass其次是构建项目，此处按照命令行一步步走是没错的react-native init yourapp // 这里需要注意：直接用...

2018-04-06 14:17:14 2079

原创匿名函数以及为什么要在匿名函数前面加“！”或者“；”

这几天经常遇见这样的写法：;(function () {}) () 开始的时候以为是书写错误，多加了个分号，后来遇到的多了，才意识到可能是我错了...然后就上网查了一番，现在终于大白于天下，整理记录一下吧~首先要知道什么是匿名函数，我们知道函数的声明方式有以下两种：function fn() {} // 声明式var fn = function(){} // 赋值表达式然后调用这个函数的时候就在函...

2018-03-31 22:59:40 1606

原创当div的宽度为百分比时，如何设置高与宽相等

今天做了一个demo，其中要用到圆形，首先想到的就是给一个div设置宽等于高，再加上border-radius等于宽的一半就好了div { width: 200px; height: 200px; border-radius: 100px;}但是如果div的宽度是百分比，继承的是父元素的宽度的百分比时，高度该如何设置为等于宽呢？div { width: 20%...

2018-03-28 21:48:37 13044 2

原创移动端页面单位的选择(px em rem)

移动端页面单位的选择(px em rem)绝对单位: px相对单位: rem em em具有继承性继承自直接父类所以说在移动端很少用浏览器默认的字体大小 16px 那么 1em=16pxrem 有一个统一的标准它继承自html 默认是16px=1rem可以给html的字体大小设置为10px html{ font-size: 10px; } 10px=1...

2018-03-27 22:47:40 2159

原创移动端页面的meta标签

移动端页面的一些meta标签的使用,记录一下<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width, initial-scale=1.0, .

2018-03-27 22:29:34 254

三七二十一的博客