【陌己】reactnative编写——陌己,mojom,陌路寻知己
刘力瑞 / 2017-10-18 / 电脑技术 / 阅读量 3280
2017.10.1出于兴趣着手尝试跨平台开发一款陌生人社交app——陌己

历程

17年10月18日

以前用的navigator做的页面切换与导航,但存在很多不便,需要需要自己实现,效果比较差,今天完成首页向react-navigation的转换,这个还是扩展性很高,易用的一个

17年10月22日

完成登录后主页框架重构,完全使用reactnavigation

17年11月4日

与队友最终确定方向,主打兴趣,完成重构主页框架

17年11月13日

完成“知己”页面按字母滑动检索,参考:参考1参考2

17年11月20日

完成后台通讯及登录保持。

17年11月21日

完成自己设置的引导页面

17年11月23日

整合原先用户数据库,完成注册后台

17年11月24日

开始着手用户数据整合前端,完成首页定制图缓存以及位置储存

18年3月31日

完成1.0.0的建设,发布审核

建站期间遇到的各种问题及解决方法

  • 17年10月18日:子组件希望通过改变父组件state实现重新render?
父组件可以添加screenProps={{functionName:()=>{this.setState({})}}},子组件便可以通过调用this.props.screenProps.functionName()改变父组件state
  • 17年10月18日:在react-navigation外部设有ImageBackground,却被覆盖?
修改react-navigation本身与内部组件背景色为透明即可:内部组件->Navigator添加属性:cardStyle:{backgroundColor:'transparent'};外部组件->Navigation添加属性:transitionConfig:()=>({containerStyle:{backgroundColor:'transparent'}}),即可
  • 17年10月23日:使用react-navigation的tabnavigator时希望在导航栏加入自己的事件组件?
tabBarComponent设置自定义的继承组件,修改render方法,再修改后需要的地方加入this.render()即可
  • 17年10月24日:如何使用滑动列表固定头部,下一列表到来时自动顶替?
sectionList的renderSectionHeader和stickySectionHeadersEnabled是非常好用的组合!
  • 17年11月4日:ImageBackground如何设置背景图半透明?
官方文档并没有说明ImageBackground,通过查看源码,发现起始为View加了个absolute的Image,View有个属性imageStyle,设置ImageBackground属性:imageStyle={{opacity:.6}}即可
  • 17年11月17日:react-native-parallax-scroll-view插件下拉图片放大时,下端有空白?
调整outputScaleValue属性
  • 17年11月18日:reactnavigation当stacknavigation和drawernavigation联用时,拖动出drawer未完成时点击stack,会闪跳?
drawer改用react-native-side-menu,效果更佳
  • 17年11月18日:react-native-side-menu不能使右边内容部分蒙上阴影?
通过onSliding属性,内容同级设置absolute纯黑masker,setNativeProps局部刷新部件改变透明度,改变透明度时refs无法选中,因为是自定义的组件,接收不到ref属性,外面套了一个view flex:1,改好。
  • 17年11月20日:fetch post请求不到?请求报错?
请求不到可能主机不支持传输类型,可以更换数据类型json为x-www-form-urlencoded,报错可能后台文件有问题
  • 17年11月21日:引导页面实现?
将原来的app.js打包为一个组件,app.js内容改为需要的引导图,参考http://blog.csdn.net/lcg910978041/article/details/53009332,学习使用通过Animated.View设置渐隐效果,start()的回掉函数将引导页setNativeProps为display:none;实现可能性能较差一点点的引导页
  • 17年11月24日:reactnative程序闪退?
一般是数据类型错误导致,比如后台的对象属性存在一个int,直接json处理没有类型转换容易导致问题。
  • 17年12月15日:display:none后内部若是text包含中文会卡死?
索性不用display:none,如果需要隐藏,直接不加载就好:this.state.show?:null,类似这样
  • 18年1月2日:fetch获取数据一段时间后总是超时?
参考https://www.jianshu.com/p/c745739e1b1c,自己再修改修改封装了一个myFetch解决
  • 18年1月3日:js new date自己传时间?
new Date("January 12,2006 22:19:35");
new Date("January 12,2006");
new Date(2006,0,12,22,19,35);
new Date(2006,0,12);
new Date(1137075575000);五种
  • 18年1月12日:this.props.navigation.goBack();无效?
看网上说改了源代码实现跳转指定key页面时会使goback无效,需要加入参数null。并没有改源代码,抱着试一试的心态改为this.props.navigation.goBack(null);问题解决
  • 18年1月26日:listview的renderSectionHeader中view style的flexDirection设为row无效?
listview该属性会在外层再自动加一个view,在view row外加一个view即可解决。
  • 18年2月1日:setState sectionlist的sections后,textinput被重新渲染?
新的sections里需要避免每个键对应的key值,否则会全部重新渲染
  • 18年2月1日:外部组件如何调用内部组件方法?
内部组件内部直接声明方法,通过给子组件加引用ref,父组件通过this.refs.“引用名”.“方法名”如此调用即可
  • 18年2月26日:react-native-image-picker-crop组件产出图片如何上传?
获取image后需要设置uri:image.uri=image.path通过formdata组装上传即可
  • 19年4月12日:文件上传报错:TypeError network request failed?
react native image crop picker组件默认没有uri和type属性,上传需要把path传给uri,mime传给type后解决
1 + 1 =
8 评论
    武胜婚庆公司Firefox Browser 59Windows 7
    2018年03月24日 回复

    文章很好,有收获。

      刘力瑞Edge 16Windows 10
      2018年04月01日 回复
    武胜Firefox Browser 59Windows 7
    2018年03月24日 回复

    有收获学习了。

    小可爱Safari 11OSX
    2018年03月11日 回复

    刘力瑞加油!

      刘力瑞Edge 16Windows 10
      2018年03月11日 回复

      @小可爱 嗯!小公举也加油!

    质量认证Sogo BrowserWindows 7
    2018年02月28日 回复

    描述的好细

    abcSafari 11iPad
    2018年01月04日 回复

    刘力瑞加油

      刘力瑞Edge 16Windows 10
      2018年01月05日 回复

      @abc 嗯!谢谢你!!!