1.Image组件的borderRadius画圆有平台兼容性问题,在IOS下会失效

解决方法有几种
(1)在外面包裹一层View,对View组件使用borderRadius就可以了,这是我的做法
(2)在同一级属性块下加上overflow: 'hidden',我没试过,大家可以阅读下面的链接

2.React-Native的渐变实现方案

(1) 使用react-native-linear-gradient:https://github.com/react-native-community/react-native-linear-gradient

(2) 让设计直接提供渐变的背景图片,简单粗暴

3.React-Native的阴影实现方案

(1)借助react-native-shadow模块实现(需要引入其他原生代码)
(2)借助react-native-shadow-card模块实现(不需要引入其他原生代码)
(3)自己实现,通过shadowOpacity等原生属性单独实现对IOS的兼容,通过elevation属性单独实现对Android的兼容,实际上这也是react-native-shadow-card的做法
(4)让设计直接提供阴影的背景图片,简单粗暴

4.Animated插值的用法

插值映射的时候,outputRange可以是一个 “数字 + 特殊字符”的形式,例如
outputRange: ['0%', '100%']
或者
outputRange: ['0deg', '100deg']
或者

width: this.state.progress.interpolate({

  inputRange: [01],

  outputRange: ['0%''100%']

})

5.RN动画三板斧

第一步:初始化动画值

this.state = {
  progress: new Animated.Value(0)
};
 
 
第二步:改变动画值
Animated.timing(this.state.progress, {
      toValue: endRatio,
      duration: 800,
      easing: Easing.inOut(Easing.ease)
      // easing: Easing.linear()
    }).start();
 
 
 
 
第三步:取值放进Animated.View中(必须用Animated下的组件)

const localStyle = {

      width: this.state.progress.interpolate({

        inputRange: [01],

        outputRange: ['0%''100%']

      })

};

return

6.style对象的格式

style对象不一定强制要求用StyleSheet.create包裹,普通的对象字面量也可以写入组件的style属性当中

7. fontWeight的取值

可以控制字体粗细,取值有“normal”,"bold","100" ~ "900",其中 “400”是正常,“700”是"bold" 
{
  fontWeight: "100"
}

8.Image的长度最好不要使用比例

Image的长度定义最好使用固定的px,如果使用比例控制长度的话,会遇到不太好处理的情况

React-Native踩坑记录二的更多相关文章

  1. react Native 踩坑记录

    应用 1 安卓打包 经验 解决方案 ,官方 解决方案 2 调试 用 React-Native-Debugger 教程 3 微信分享和登录 使用 react-native-wechat    地址 设计 ...

  2. react native踩坑记录

    一 .安装 1.Python2 和Java SE Development Kit (JDK)可以直接通过腾讯电脑关键安装, Android SDK安装的时候路径里不能有中文和空格 2.配置java环境 ...

  3. React Native踩坑日记 —— tailwind-rn

    项目背景 在项目的初始阶段,我们需要建立自己的design system,我们spike了一些方案,tailwind-rn就是其中一种,如果有用到或者即将用到tailwind-rn的,可以进来看一看, ...

  4. React Native踩坑Tip

    最近在使用React Native(以下简称RN)中踩了个坑,RN只能异步调用原生方法,所以在原生方法直接调用UI刷新操作需要将任务递交到主线程才可以. RCT_EXPORT_METHOD(finis ...

  5. React Native踩坑之旅

    原文连接:http://www.studyshare.cn/blog-front/blog/details/1137 最近做一个app,使用React Native实现,如果严格按照RN官方文档去配置 ...

  6. React Native入坑记录

    1.render中如果使用props,直接用this.props.xxx,如果是在JSX中,用{this.props.xxx} 2.警告each child in an array or iterat ...

  7. Spring Cloud Feign踩坑记录(二)

    注意,以下的Feign遇到的坑,在高版本中有些已经修复. 某些项目由于历史包袱原因,无法进行全面升级,才需要修补这些坑. 1.启动报错:not annotated with HTTP method t ...

  8. React Native踩坑之Unable to load script from assets

    报错: Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged corr ...

  9. React Native踩坑之FlatList组件中的onEndReached

    最近在做一个RN项目,有使用到FlatList这样一个RN封装的组件去做上拉加载更多功能,在iOS和Android平台上,总结了以下几个遇到的问题及解决方案 1. 进入页面onReached开始就被触 ...

  10. React Native踩坑之The SDK directory 'xxxxx' does not exist

    相信和我一样,自己摸索配置环境的过程中,第一次配,很可能就遇到了这个比较简单地错误,没有配置sdk环境 解决办法 在电脑,系统环境变量中,添加一个sdk的环境变量 uploading-image-95 ...

随机推荐

  1. 全排列(STL)

    输入一个整数n,输出1~n的全排列(是不是很水) 在此记录stl做法 #include<bits/stdc++.h> using namespace std; ]; int main(){ ...

  2. python元类深入解析

    元类 什么是元类 元类是类的类,是类的模板(就如对象的模板是类一样) 元类的实例为类,类的实例为对象 元类是用来产生类的 动态语言和静态语言最大的不同,就是函数和类的定义,不是编译时定义的,是运行时动 ...

  3. MySQL主从介绍、配置主从、测试主从同步

    6月28日任务 说明:有不少同学不能一次性把实验做成功,这是因为还不熟悉,建议至少做3遍17.1 MySQL主从介绍17.2 准备工作17.3 配置主17.4 配置从17.5 测试主从同步有的同学,遇 ...

  4. 2019-2020-1 20199304《Linux内核原理与分析》第四周作业

    第三章 MenuOs的构造 一.前情回顾 计算机的三大法宝: -存储程序计算机 -函数调用堆栈 -中断 操作系统的两把宝剑: -中断上下文的切换(保存现场和恢复现场) -进程上下文的切换 二.3.1 ...

  5. 补习系列(20)-大话 WebSocket 与 "尬聊"的实现

    目录 一.聊聊 WebSocket 二.Stomp 是个什么鬼 三.SpringBoot 整合 WebSocket A. 引入依赖 B. WebSocket 配置 C. 控制器 D. 前端实现 四.参 ...

  6. MySQL的存储(二、创建表并插入)

    创建表 首先创建一个 spiders的数据库 cursor.execute("create database spiders default character set utf8" ...

  7. Zookeeper选取机制

    1)半数机制:集群中半数以上机器存活,集群可用.所以Zookeeper适合安装奇数台服务器. 2)Zookeeper虽然在配置文件中并没有指定Master和Slave.但是,Zookeeper工作时, ...

  8. CSU OJ 2148 梦皮神

    Description Wells最近经常做一些有皮神出现的梦. 在这一次梦中Wells把皮神(Pikachu)弄丢了,Wells在一个正 N 边形区域的中心开始自闭,Wells想找回皮神,同时皮神也 ...

  9. 使用flatbuffers

    问题 张三是个java程序员,他写产生数据的程序.李四是个python程序员,他要用python处理张三产生的数据.最直观常用的方法就是张三用java把产生的数据保存成csv或者xml文件,然后李四用 ...

  10. IP,MAC

    MAC寻址与IP寻址 两者是协议上的区分,MAC地址是网卡的物理地址,是提供二层交换机转发数据的,交换机会在自己的内部形成一个MAC地址表,然后根据这个表转发数据包:再者,如果说网络规模大一点的话,机 ...