专栏首页木子墨的前端日常React-Native开发笔记 持续更新

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • react-navigation 使用笔记 持续更新中

    React-Navigation是目前React-Native官方推荐的导航组件,代替了原用的Navigator。最近开始接触,做个笔记

    木子墨
  • 到底该用img还是background-image?

    在前端页面的实现过程中,我们经常会遇到这个情况:有一个盒子,盒子里面需要放一张图片。这个时候,我们既可以通过添加image标签来实现,也可以通过设置背景图的形式...

    木子墨
  • 浏览器相关--H5本地存储

    浏览器存储主要包括一下几个部分 1. cookie 2. localStorage 3. sessionStorage 4. indexDB 5. websql...

    木子墨
  • 基于hadoop的社交网络三角形计数

    图的三角形计数问题是一个基本的图计算问题,是很多复杂网络分析(比如社交网络分析) 的基础。目前图的三角形计数问题已经成为了 Spark 系统中 GraphX 图...

    triplebee
  • 原创|Android Jetpack Compose 最全上手指南

    在今年的Google/IO大会上,亮相了一个全新的 Android 原生 UI 开发框架-Jetpack Compose, 与苹果的SwiftIUI一样,Jet...

    glumes
  • 教程 | 如何转行成为一名数据科学家?

    选自fast.ai 作者:Rachel Thomas 机器之心编译 参与:侯韵楚、hustcxy、王宇欣、微胖 有时一些粉丝会给我发邮件,想让我在数据科学方面给...

    机器之心
  • 如果数据有质量,地球将成黑洞?

    假设你经营着一家网站,出售自己编写的软件。现在想让网站为用户提供更加个性化的服务,所以你开始收集访问者的数据,比如他们的电脑型号、操作系统、浏览器、居住的国家,...

    华章科技
  • 新增 MySQL 用户

    zucchiniy
  • [816]python之pprint

    pprint提供了以一种“pretty-print”的方式打印出任意python数据结构的模块。当然,如果不是python的基本数据类型,那么这种方式可能加载不...

    周小董
  • 电解电容为什么会爆炸?一文看明白!

    电解电容是通过电解质作用在电极上形成的氧化层作为绝缘层的电容,通常具有较大的容量。电解质是液体、胶冻状富含离子的物质,大多数电解电容都是有极性的,也就是在工作时...

    MCU起航

扫码关注云+社区

领取腾讯云代金券