react native定报预披项目知识点总结-白红宇

react native定报预披项目知识点总结

阅读量：4614 次

发布时间：2019-06-09

本文共 3324 字，大约阅读时间需要 11 分钟。

1.TextInput组件对安卓的适配问题

textInput 在iOS 显示正常，但是在android下会出现下横线，并且字会被遮盖

因此一般都这么用该组件

2.关于样式

附react native可使用的样式属性：

react native的样式不存在继承的情况，所以基本上每个节点都要写style

Text 组件 文字必须放在Text元素里边，Text元素可以相互嵌套，且存在样式继承关系，被嵌套的Text 设置的间距是无效的。默认情况下，文本被按下时会有一个灰色的阴影，如果想取消就把属性 suppressHighlighting 设置为 true ，

设置border属性只能在View上，不能在Text上，自测了下，安卓下写在Text是生效的，但是在ios下不生效。

3.IOS平台下请求接口报错

IOS - fetch request from ios simulator fails

参考链接：

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文件，

修改为


     
      NSAppTransportSecurity
         
             
      
       NSExceptionDomains
              
                  
       
        myDomain.com
                   
                       
        
         NSTemporaryExceptionAllowsInsecureHTTPLoads
                        
                    
                     ...other exceptions like localhost...

把请求的接口域名加到key上就好啦。

4.关于`setState`

当我们调用 setState 的时候，React.js 并不会马上修改 state。而是把这个对象放到一个更新队列里面，稍后才会从队列当中把新的状态提取出来合并到 state 当中，然后再触发组件更新。

也就是说：setState方法是异步的，如果给一个state变量量赋值后，马上获取改变后的值，有可能是不正确的。

详细讲解参考：

现在有这样的需求

点击 “已披露” 和“未披露”改变参数值，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 来实现各个界面的跳转和不同板块的切换

相关链接：

导航路由跳转：

路由跳转切换方式：

这里着重说下 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 (      
         )  }};

需要注意的是 transitionConfig（配置页面跳转的动画，覆盖默认的动画效果）

内置的跳转动画在 react-navigation/src/views/CardStack/CardStackStyleInterpolator中，共三种。forHorizontal:从右向左进入、forVertical:从下向上进入、forFadeFromBottomAndroid:从底部淡出。

在安卓上运行时，默认的跳转动画效果是 forFadeFromBottomAndroid 。但是这种切换效果和传统的切换效果不一样，这时候我们可以自定义切换效果。

参考文章：

react-navigation 监听页面显隐

转载于:https://www.cnblogs.com/zuobaiquan01/p/9516292.html

你可能感兴趣的文章

1.TextInput组件对安卓的适配问题

2.关于样式

3.IOS平台下请求接口报错

4.关于setState

5.关于路由切换

4.关于`setState`