阅读 181

react-native踩坑之行(一)

1.android textinput placeholder 多行文本垂直居中显示,而ios左上对齐

添加属性:textAlignVertical='top'(在这里吐槽一下百度,搜了一百篇文章没一篇管用的,还是google大法好)
复制代码

2.textinput android和ios样式不一致 ios完美 Android出现下划线等

添加style : padding :0
添加属性 : underlineColorAndroid = 'transparent'
(官方文档给出的解决方案 所以 看文档还是得仔细)
复制代码

3.textInput ios键盘坑

   添加属性 : keyboardType = { 'numeric' } 千万注意字符串外部有大括号才好使~~简直神坑
复制代码

4:android默认滑动样式的变化

理由:对于react-navigation来说,iOS的默认样式是左右滑动,但是Android这个深坑是上下滑动,
    当切换的navigation-header颜色由浅色切换到深色时,会在切换前出现黑色阴影~
网上搜了超多代码,解决方法很一致,可惜没找到所需要的源码。无奈,只能自己看源码写了。
复制代码

首先引入源码的文件。接下来就是根据源码修改成我们需要的滑动方式,我把Android的修改成和ios一样的,有其他需要的同学们可以自行根据源码修改滑动样式。
复制代码

代码不易~且行且珍惜~
复制代码

5 : 传参和参数回传

传参对于navigation特别好传,跳转时带参数,下一个页面在生命周期函数里面直接获取参数即可。这几天在网上发现一个大哥写的很好的一个方法,借来分享一下。
    https://blog.csdn.net/yqxllwy/article/details/78221700
。。链接在此,请自行翻阅。这个方法只能返回静态数据,感觉很好,变换的数据还是通过navigation传吧~其次是参数回传,callback真的很好用~
代码格式:

app.js 		 
    navigate('one',{
        callback  : (backdata) => {  ...  }
    })
    
one.js 		
    const {state,goBack,navigate} = this.props.navigation
    state.params.callback('回传参数');
goBack();

这样app就会重新渲染数据了。
复制代码

最近还在跳其他坑~后续分享~

评论