2017.10.1出于兴趣着手尝试跨平台开发一款陌生人社交app——陌己
历程
17年10月18日
以前用的navigator做的页面切换与导航,但存在很多不便,需要需要自己实现,效果比较差,今天完成首页向react-navigation的转换,这个还是扩展性很高,易用的一个
17年10月22日
完成登录后主页框架重构,完全使用reactnavigation
17年11月4日
与队友最终确定方向,主打兴趣,完成重构主页框架
17年11月13日
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后解决