首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React-Native开发笔记 持续更新

React-Native开发笔记 持续更新

作者头像
木子墨
发布2018-12-10 10:23:40
9130
发布2018-12-10 10:23:40
举报

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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-11-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档