react native定报预披项目知识点总结
1.TextInput组件对安卓的适配问题
textInput 在iOS 显示正常,但是在android下会出现下横线,并且字会被遮盖
因此一般都这么用该组件
<TextInput style={{paddingVertical:0}} underlineColorAndroid="transparent" />
2.关于样式
附react native可使用的样式属性:
https://github.com/doyoe/react-native-stylesheet-guide
https://github.com/vitalets/react-native-extended-stylesheet
react native的样式不存在继承的情况,所以基本上每个节点都要写style
Text 组件
文字必须放在Text元素里边,Text元素可以相互嵌套,且存在样式继承关系,被嵌套的Text 设置的间距是无效的。默认情况下,文本被按下时会有一个灰色的阴影,如果想取消就 把 属性 suppressHighlighting 设置为 true ,
<Text suppressHighlighting={true} ></Text>
设置border
属性只能在View上,不能在Text上 ,自测了下,安卓下写在Text是生效的,但是在ios下不生效。
3.IOS平台下请求接口报错
IOS - fetch request from ios simulator fails
参考链接:https://github.com/facebook/react-native/issues/4415
This is probably caused because the latest iOS SDK enforces connections to be under https protocol, instead of plain http.
You can add an exception to your domain in the info.plist file of the Xcode project.
something like this should work:
解决办法:找到 Info.plist文件,
修改为
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>myDomain.com</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
...other exceptions like localhost...
</dict>
</dict>
把请求的接口 域名 加到key上 就好啦。
4.关于setState
当我们调用 setState
的时候,React.js 并不会马上修改 state。而是把这个对象放到一个更新队列里面,稍后才会从队列当中把新的状态提取出来合并到 state
当中,然后再触发组件更新。
也就是说:setState方法是异步的,如果给一个state变量量赋值后,马上获取改变后的值,有可能是不正确的。
详细讲解参考:http://huziketang.mangojuice.top/books/react/lesson10
现在有这样的需求
点击 “已披露” 和“未披露”改变参数值,handePilouChange(0) , handePilouChange(1)
handePilouChange(tag) {
if (tag == this.state.pilouActive) {
return
}
this.state.pilouActive = tag
this.state.PAGENUM = 1
this.setState({
pilouActive: tag,
PAGENUM: 1,
hasMore: false
})
this.getData()
}
当我们在调用 this.getData() 函数时,需要拿到最新的state值,如果单纯的使用 this.setState({pilouActive: tag}) 在 getData函数中我们发现 当前的state还是之前的state的值,没有立即改变,此时的做法是
this.state.pilouActive = tag
5.关于路由切换
在 React Native
中,官方已经推荐使用 react-navigation
来实现各个界面的跳转和不同板块的切换
相关链接:
导航路由跳转:https://reactnavigation.org/docs/zh-Hans/getting-started.html
路由跳转切换方式:https://www.cnblogs.com/CrazyWL/p/7283600.html
这里着重说下 StackNavigator
导航组件
基本使用案例:
import { createStackNavigator } from 'react-navigation'
const MainStack = createStackNavigator(
{
Home: {
screen: IndexPage
},
Details: {
screen: DetailPage
},
},
{
initialRouteName: 'Home',
headerMode: 'none',
transitionConfig: () => ({
transitionSpec: {
duration: 350,
easing: Easing.out(Easing.poly(4)),
timing: Animated.timing,
},
screenInterpolator: sceneProps => {
const { layout, position, scene } = sceneProps
const { index } = scene
const width = layout.initWidth
const translateX = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [width, 0, 0]
})
const opacity = position.interpolate({
inputRange: [index - 1, index - 0.99, index],
outputRange: [0, 1, 1]
})
return { opacity, transform: [{ translateX }] }
},
})
}
); export default class rootApp extends Component{
constructor(props) {
super(props)
}
render() {
return (
<MainStack />
)
}
};
需要注意的是 transitionConfig(配置页面跳转的动画,覆盖默认的动画效果)
内置的跳转动画在 react-navigation/src/views/CardStack/CardStackStyleInterpolator中,共三种。forHorizontal:从右向左进入、forVertical:从下向上进入、forFadeFromBottomAndroid:从底部淡出。
在安卓上运行时,默认的跳转动画效果是 forFadeFromBottomAndroid 。但是这种切换效果和传统的切换效果不一样,这时候我们可以自定义切换效果。
参考文章:https://github.com/react-navigation/react-navigation/pull/1187#issuecomment-300112470
react-navigation 监听页面显隐 https://reactnavigation.org/docs/en/navigation-prop.html
react native定报预披项目知识点总结的更多相关文章
- 将React Native 集成进现有OC项目中(过程记录) 、jsCodeLocation 生成方式总结
将RN集成到现有OC项目应该是最常见的,特别是已经有OC项目的,不太可能会去专门搞个纯RN的项目.又因为RN不同版本,引用的依赖可能不尽相同,所以特别说明下,本文参考的文档是React Native ...
- [RN] React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中,放大报错问题
React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中,放大报错问题 报错如下: Cannot record touch end w ...
- [RN] React Native 实现图片预览
[RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...
- react native 环境报错
按照react native中文网的文档安装 1.brew 管理软件 2.node 在终端启动工程后就报下面这个错误 这个错误是在RN在第一次配置环境启动一个工程的时候 ,在这过程中下载的缓存文件不完 ...
- React Native 0.56.1初始化项目运行出现错误(Module `AccessibilityInfo` does not exist in the Haste module map)
当使用react-native init myApp初始化项目时,出现以下错误 出现以上错误的原因是因为0.56.1版本初始化项目就有问题,请见 https://github.com/facebook ...
- React Native 日常报错
在学习React.js 或 React Native 过程中,有时看着别人的框架或代码,但总是会出现错误,因为React或之中用到的一些包经常更新,有些代码或教程就显得过旧了. 一.日常报错 'con ...
- React Native环境配置、初始化项目、打包安装到手机,以及开发小知识
1.前言 环境:Win10 + Android 已经在Windows电脑上安装好 Node(v14+).Git.Yarn. JDK(v11) javac -version javac 11.0.15. ...
- React Native技术做的一个项目“微笑阅读”
最近用React Native做了一个APP应用,有点心得: React Native确实比Hybrid应用渲染快,响应快,用户体验更好: React Native比原生简单多了,会Js就可以了,开发 ...
- React Native 基础报错及解决方案记录
刚开始上手RN,碰到很多坑,记录一下.碰到问题多去看看github上面的issue! 启动命令react-native run-ios报错 1.:xcrun: error: unable to fin ...
随机推荐
- es6 for of 循环
es6 新增了 for of 循环,只要继承了Iterator 接口的数据集合都可以使用 for of 去循环 for of 循环,统一数据集合的循环方法,解决了forEach循环的不能使用break ...
- 虚拟机安装CentOS7(一)
软件环境 虚拟机:VMware Workstation Linux:CentOS-7-x86_64-DVD-1708.iso镜像文件 虚拟机所在电脑系统:win7 安装步骤 安装VMware 下载Li ...
- jsp内置对象-page对象
page对象代表jsp本身,只有在jsp页面才有效.page对象本质上是被转换后的Servlet,因此它可以调用任何被Servlet类所定义的方法. 项目ch05案例:创建HttpJSPPage类的对 ...
- SVN的使用说明
SVN管理版本是比较好的东西,但是我的SVN图标老是不出来,有时候莫名其妙就没有了,所以记录一下处理办法: 1.右键->TortoiseSVN->Settings->Icon Ove ...
- Snapde电子表格支持的文件格式
Snapde,一个专门为编辑超大型数据量CSV文件而设计的单机版电子表格软件:它运行的速度非常快,反应非常灵敏.那么它支持哪些文件格式呢? 1.CSV文件格式,是一种以逗号分隔列.以回车分隔行的文本文 ...
- 一起学Android之ToggleButton和Switch
本文以一个简单的小例子,简述在Android开发中ToggleButton(开关按钮)和Switch(开关)的简单使用,仅供学习分享使用. 概述 ToggleButton是一个有两种状态(checke ...
- Tips on Building WebRTC on Windows
Problem: Git ask me to input git user and password Solution: Set environment variable SET DEPOT_TOOL ...
- linux查看硬盘占用情况
Linux命令 : df -hl 使用后文件系统 容量 已用 可用 已用% 挂载点Filesystem Size Used Avail Use% Mounted on/dev/vda1 197G 5. ...
- TSC条码打印机C#例程(tsclib.dll调用) 【转】
//---- program.cs using System;using System.Collections.Generic;using System.Windows.Forms; using S ...
- 51Nod 1004 n^n的末位数字
思路:首先将0~9的平方的尾数放在一个数组a里面,方便后面直接调用,因为不论多大的数做什么运算,得到的结果的最后一位数只和运算前所有数的最后一位数有关系.新建变量d,z一个是底数,一个是幂次.循环判断 ...