React-Native踩坑记录二

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

解决方法有几种

(1)在外面包裹一层View,对View组件使用borderRadius就可以了,这是我的做法

(2)在同一级属性块下加上overflow: ‘hidden‘,我没试过,大家可以阅读下面的链接

https://www.jianshu.com/p/d237f0258418

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,如果使用比例控制长度的话,会遇到不太好处理的情况

原文地址:https://www.cnblogs.com/penghuwan/p/11841083.html

时间: 2024-10-15 13:35:07

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

React – Native 踩坑记

运行的时候先报错说can’t be opened because it is from an unidentified developer,这是osx自己安全设置搞太高,去安全选项改了(allow apps download from anywhere)之后.又报错说permission问题,于是在终端用(chmod -R 755 /项目根目录)(主意:755后面一定要加空格)把所有文件都改成755权限,然后就可以完美运行了. 用模拟器和真机调试时,环境不同,在工程AppDelegate.m的-

react native 踩坑之 SectionList state更新 不执行render重新渲染页面

官方文档中指出 SectionList 本组件继承自PureComponent而非通常的Component,这意味着如果其props在浅比较中是相等的,则不会重新渲染.所以请先检查你的renderItem函数所依赖的props数据(包括data属性以及可能用到的父组件的state),如果是一个引用类型(Object或者数组都是引用类型),则需要先修改其引用地址(比如先复制到一个新的Object或者数组中),然后再修改其值,否则界面很可能不会刷新.(译注:这一段不了解的朋友建议先学习下js中的基本

【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2219.html 在上一篇  [REACT NATIVE 系列教程之一]触摸事件的两种形式与四种TOUCHABLE组件详解 中的最后介绍了如何使用Touchable的四种组件进行监听触摸事件.  那么紧接着我们利用Touchable来包装一个带图片的Button组件,且设计成可接受很多自定义参数. 一:创建我们自定义

unionId突然不能获取的踩坑记录

昨天(2016-2-2日),突然发现系统的一个微信接口使用不了了.后来经查发现,是在网页授权获取用户基本信息的时候,unionid获取失败导致的. 在网页授权获取用户基本信息的介绍中(http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html),unionid可以在第二步(https://api.weixin.qq.com/sns/oauth2/access_token)和第四步的2个接口中获得.其中,第四步的接口是

IDFA踩坑记录

IDFA踩坑记录: 1.iOS10.0 以下,即使打开"限制广告跟踪",依然可以读取idfa: 2.打开"限制广告跟踪",然后再关闭"限制广告跟踪",idfa会改变: 3.越狱机器安装开发证书打的包,读取的idfa正常: 4.越狱机器安装本地打的发布证书的包,读取idfa异常,第一次打开app读取的是一个错误的idfa,第二次打开会变成另外一个错误的idfa: 5.越狱机器安装Testflight的包,读取idfa异常,第一次打开app读取的是一

【Pysc2】Deepmind Pysc2 环境配置及其踩坑记录

1. 下载星际争霸II游戏 可以直接下暴雪战网,然后在战网内下载. 2. 下载Pysc2 cmd后在命令行输入 pip install pysc2 3. 下载sc2 cmd后在命令行输入 pip install sc2 4. 下载地图 https://github.com/ClausewitzCPU0/SC2AI 解压密码: iagreetotheeula (表示自己同意最终用户许可协议) 解压在Maps的文件夹,我是使用的暴雪战网下载的游戏,发现游戏文件夹里并没有Maps, 需要自己手动创建.

Linux Git 踩坑记录

Linux Git 踩坑记录 git cherry-pick 冲突解决 出现: error: could not apply xxxxxx(commit ID)... ***** hint: after resolving the conflicts, mark the corrected paths hint: with 'git add ' or 'git rm ' hint: and commit the result with 'git commit' 此时使用git status命令查

Creat-React-Native-App 之StackNavigator之踩坑记录

Creat-React-Native-App简称CRNA. 在我开始入门RN时fb已经推出和Expo联合开发用于快速创建React Native应用的工具: Create-React-Native-App.以下是在CRNA开发起步时导航器跳转页面遇到的问题记录. 参考资料:React Native中文网 React Navigation 根据教程指导,写了最简单的导航条调用示例: import React from 'react'; import { StyleSheet, Text, Butt

java用毫秒数做日期计算的一个踩坑记录

错误示例: Date today = new Date(); Date nextMonth = new Date(today.getTime() + 30* 1000*60*60*24); println(today); println(nextMonth); Result:  Sat Sep 30 11:18:24 CST 2017 Sun Sep 10 18:15:37 CST 2017 代码说明:上面代码的目的是计算一个月后的日期,从结果发现明显是错误的(回到上个月去了) 原因分析:30*