React-Native开发笔记 持续更新
1、css单位转换px2dp
在做页面开发的时候习惯了用rem去做css单位,处理各种尺寸数据,到了React-Native里面做app开发时,rem就不好用了,这个时候就需要转换成另外一个单位,基本原理和rem转换差不多,如下
'use strict';
import { Dimensions } from 'react-native';
const deviceH = Dimensions.get('window').height;
const deviceW = Dimensions.get('window').width;
const basePx = 375;
export default function px2dp(px) {
return px * deviceW / basePx;
}
2、RN中的Image标签是无法响应click/press事件的,需要的话在外面套一个TouchableOpacity吧
3、header部分标题居中
ios下默认标题居中,但是android下由于整体风格和ios不一样,所以如果需要居中就要自己动手了。
网上有很多方案,比如设置
headerTxt: { textAlign: 'center' }
或者
headerStyle: { textAlign: 'center' }
等等,不知道是我写错了还是其他原因,并没有生效。最终解决方案就是在header中添加一个text组件代替原有的title属性。然后对text标签设置居中。
static navigationOptions={
headerLeft: <TouchableOpacity onPress={_closeApp}>
<Image source={{uri: 'https://img.aiyoumi.com/null/20181019/115051759/20181019115051_48x48.png?height=48&width=48'}} style={{width: 21, height: 21, marginLeft: 5}}/>
</TouchableOpacity>,
headerTintColor:'#000', //按钮、标题颜色设置
headerTitle: (
<Text style={{ flex: 1, textAlign: 'center', color: '#222222', fontSize: px2dp(18) }}>我的客服</Text>
),
headerRight: <View/>
};
4、ScrollView不生效?
原谅我的无知,我实在不知道我写的scrollView为啥拖不动,肯意外的是加一段。。。ref={(scrollView) => { _scrollView = scrollView; }}这个就好了。。。就好了。。。
<ScrollView ref={(scrollView) => { _scrollView = scrollView; }}>
<View style={styles.container}>
<Text>URL:{this.state.requestUrl}</Text>
<Text>METHOD:{this.state.requestMethod}</Text>
</View>
<View style={styles.container}>
<Text>开始时间: {this.state.startTime}</Text>
<Text>结束时间: {this.state.endTime}</Text>
<Text>消耗时间: {this.state.tiemCost}ms</Text>
</View>
</ScrollView>
5、code-push -t参数误解
-t参数后一般会跟一个版本号,乍一看可能就以为是发布的版本号,然后实际上并不是的
-t 参数全称是 --targetBinaryVersion指的是你的更新要针对的是哪个版本,比如app中的版本是1.0.1的话,你每次codepush -t的应该都是1.0.1直到app中版本更新。
命令行解释:--targetBinaryVersion, -t Semver expression that specifies the binary app version(s) this release is targeting (e.g. 1.1.0, ~1.2.3). If omitted, the release will target the exact version specified in the "Info.plist" (iOS), "build.gradle" (Android) or "Package.appxmanifest" (Windows) files. [字符串] [默认值: null]
React-Native开发笔记 持续更新的更多相关文章
- React Native 开发笔记
ReactNativeDemo 学习ReactNative开发,搭建ReactNative第一个项目 React Native 开发笔记 1.安装Homebrew $ /usr/bin/ruby -e ...
- React Native错误汇总(持续更新)
错误1 Element type is invalid-: 错误描述: Element type is invalid: expected a String(for built-in componen ...
- React Native 学习笔记--进阶(二)--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- React Native开发入门
目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料 一.前言 虽然只是简单的了解了一下Reac ...
- BLE资料应用笔记 -- 持续更新
BLE资料应用笔记 -- 持续更新 BLE 应用笔记 小书匠 简而言之,蓝牙无处不在,易于使用,低耗能和低使用成本.'让我们'更深入地探索这些方面吧. 蓝牙无处不在-,您可以在几乎每一台电话.笔记本电 ...
- React Native开发技术周报1
(一).资讯 1.React Native 0.21版本发布,最新版本功能特点,修复的Bug可以看一下已翻译 重要:如果升级 Android 项目到这个版本一定要读! 我们简化了 Android 应用 ...
- React Native开发的通讯录应用
React Native开发的通讯录应用(使用JavaScript开发原生iOS应用,vczero) 0.前言: 项目地址:https://github.com/vczero/React-Native ...
- iOS程序员的React Native开发工具集
本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具 你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...
- React Native开发 - 搭建React Native开发环境
移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的. ...
随机推荐
- Redis-其他命令
1.排序 SORT : SORT sourcekey [BY pattern] [LIMIT offset count] [GET pattern [GET pattern ...]] [A ...
- Java基础——GUI编程(三)
接着前两篇学习笔记,这篇主要介绍布局管理器和对话框两部分内容. 一.布局管理器 先拿一个小例子来引出话题,就按照我们随意的添加两个按钮来说,会产生什么样的效果,看执行结果. import java.a ...
- 模版方法模式(Template Method)
1.概念 在模板模式(Template Pattern)中,一个抽象类公开定义了执行它的方法的方式/模板.它的子类可以按需要重写方法实现,但调用将以抽象类中定义的方式进行.这种类型的设计模式属于行为型 ...
- HDU4960(SummerTrainingDay03-F dp)
Another OCD Patient Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Ot ...
- numpy练习题
1. 导入numpy库并简写为 np import numpy as np 2. 打印numpy的版本和配置说明 print(np.__version__) print(np.show_config( ...
- 搭建vue开发环境步骤
相信很多人在刚开始学习vue这个框架的时候,在最开始搭建开发环境的时候,都会遇到一些大大小小的坑,我之前在学习的时候搭建过一次,过了一个月后在搭建第二次的时候,竟然有一些混乱,所以今天想整理出来: v ...
- Unexpected directive 'XXX' imported by the module 'AppMoode'
做angular demo报错: Uncaught Error: Unexpected directive 'ScrollSpyDirective' imported by the module 'A ...
- require.js的基本概念及使用流程(1)
今天,我们来说一说requireJS的基本概念,在下一篇随笔中我们再去讨论讨论requireJS的使用步骤 这一篇都是一些概念性比较强的东西,希望大家擦亮自己的钛合金狗眼好好看看概念,好吧 首先,什么 ...
- 图片轮播(Jquery)
昨天在博客园里面看到imwtr写的图片轮播(淡入淡出)的文章,觉得是否自己可以将该功能写成Jquery插件的形式,也方便之后如果需要的时候可以直接使用. 经过调整和整合,完成了第一版本的jquery. ...
- ArcGIS JavaScript API 4.x中热度图渲染的使用注意事项
要使用ArcGIS JavaScript API 4.x的热度图渲染器来渲染要素图层,需要注意几点前提条件: 1.需要使用ArcGIS Server 10.6.1或更高版本发布GIS服务. 2.只支持 ...