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,至少需要两套代码.两个团队.对于公司来说,成本还是有的. ...
随机推荐
- jQuery显示SQL存储过程自定义异常信息
学习MVC应用开发,改变了Insus.NET以前ASP.NET的开发习惯,以前开发均是服务器端,而现在使用jQuery的Ajax在实现.想到与考虑了很多问题,也遇上很多问题,一些解决了,一些还留下,望 ...
- CruiseControl 安装配置
https://sourceforge.net/projects/ccnet/files/CruiseControl.NET%20Releases/ 一个完整的配置文件(VS2010的解决方案)其他版 ...
- C#编译和运行过程图例
一张图,描述C#编译和运行过程,比较容易记忆理解
- JUC源码1-原子量
什么是原子量,原子量就是一次操作,要么成功,要么失败.比如java中的i++ 或i-- , 不具备原子性,每次读取的值都是不一样的,探究其原因,x86体系中,他的总线是32位的,i++的操作指令必须是 ...
- [javaSE] 看博客学习多线程的创建方式和优劣比较和PHP多线程
通过实现Runnable接口创建线程 获取Thread对象,new出来,构造函数参数:Runnable对象 Runnable是一个接口,定义一个类MyRunnable实现Runnable接口,实现ru ...
- Vue之组件使用(一)
这仅仅是个人为了防止忘记做的笔记而已,仅供参考,有不对的地方请纠正 组件这种东西用来封装多次使用的控件还是很有用处的,我还是挺喜欢这种模式,优化了前端的工作,写个组件也比较简单.下次有时间记录一下样式 ...
- JAVA—集合框架
ref:https://blog.csdn.net/u012961566/article/details/76915755 https://blog.csdn.net/u011240877/artic ...
- Linux常用基本命令(cut)
cut命令 作用:从文件的每一行剪切字节,字符或者字段,类似与编程语言中的字符串截取函数 格式:cut [option] [file] -b:仅显示行中指定直接范围的内容: -c:仅显示行中指定范围的 ...
- HDU1814(2-SAT)
Peaceful Commission Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- Angular 中引入BootStrap
由于Bootstrap官方目前并没有发布Angular的相关类库进行支持,当前Angular只能引用使用Bootstrap相关的样式.无法使用Bootstrap自带的脚本逻辑.以下以Angular7和 ...