优购微零售-已上线项目中,完全使用react-native的一些体会
来源:互联网 发布:网络信息安全工程师 编辑:程序博客网 时间:2024/05/16 15:45
优购微零售,是一款依托百丽集团的品牌商品,依靠分享推荐商品,既满足购物需求,同时又能够获得分享红利。
3月25日,公司领导紧急通知,由于原来微零售项目负责人离职,app,h5和app服务端都要由我这边团队来做。而且时间特别急,需要在4月底全部提交测试,并在6月1日之前上线。
h5和app服务端我倒是不担心,主要担心的就是app。之前那个负责人规划的是用嵌套H5的方式。但是,我之前有过用类似的方式开发一个helloworld程序的体验,感觉效果很差。
我的团队都是以后台开发为主,只有一个伙伴是干了半年android的维护,不过他说看过需求,问题不大。
有一个兄弟团队的人告诉我,用react-native。 看了一天文档,我就决定搞一把了。
为啥会有这个决定呢,其实,我心里也早就想好了,android这边问题应该不会很大。所以,前期保证android正常上线,ios稍微拖一两周也能说得过去。
就此,走上了一条rn的探索道路。
先说下结果,我们在5月上旬开发完了ios的版本提交测试,比原计划稍微晚了一周左右。5月28日,一次提交就通过了苹果的审核。
这次的RN体会,让我对客户端开发有了一种愉悦的感觉,之前一直抵触ios开发,觉得objective-c太别扭。
遇到几个问题:
1. 页面跳转后隐藏 Tab
在RCTNavigator.m中- (void)navigationController:(UINavigationController *)navigationController willShowViewController:(__unused UIViewController *)viewController animated:(__unused BOOL)animated这个方法一开始的地方加入:RCTWrapperViewController * thisController = (RCTWrapperViewController *)viewController; if (navigationController.viewControllers.count > 1) { thisController.tabBarController.tabBar.hidden = YES; } else { thisController.tabBarController.tabBar.hidden = NO; }
我们在使用
this.props.navigator.push({ component: 跳转到的页面, 参数一:参数值});发现,这个参数一无法在跳转的页面里面接收。
仔细检查一下我们的navigator系统,我们发现,在设置navigator的时候,我们使用了:
<Component {...route.params} navigator={navigator} />
按照网上一些做法,通过他们都是这样来传值的:
this.props.navigator.push({ component: 跳转页面, params: { 参数一:参数值 }})在下一个页面,通过this.props.参数一来获取。
但是这种方式,在我们这里始终无法获取值,真不知道啥原因,求大神指点。
最后我们,在设置navigator的时候,这么写的:
<Component {...route.params} navigator={navigator} route={route}/>加入了route,跳转传值还是按照第一种方式,获取值采用 this.props.route.参数一来获取传递的值。
3. 图片
建议所有图片全部放到ios的xcode项目中去,然后采用 require('image!图片名')的方式,通过相对路径引用图片,我们本地老出现文件编码错误的提示。
4. 尽量不适用 带IOS后缀的组件
5. 一定要用CodePUSH
6.react-native Image里面嵌入text实现透明背景
<Image ref='storeBackgroundImage'source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{flex: 3.4,alignItems:'center',justifyContent:'center'}}><Image ref='storeLogo' source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={styles.storeImage}/> <View style={{backgroundColor: 'rgba(0,0,0,0)'}}> <Text>店铺的名称</Text> </View> <View style={{backgroundColor: 'rgba(0,0,0,0)'}}> <Text>店铺的名称</Text> </View></Image>在Text上层嵌套一个View,设置背景色 0,0,0,0即可。
7. 在变量前面加上global. 就是全局变量
8. 用 `` 实现字符串替换
var {id, name} = this.props.user; var firstName = name.split(' ')[0]; // TODO: problems with i18n return ( <TouchableOpacity style={styles.pog} onPress={this.props.onPress}> <Image style={styles.profilePic} source={{uri: `http://graph.facebook.com/${id}/picture`}} /> <Text style={styles.text}> {firstName} </Text> </TouchableOpacity> );
后续要加入Redux,还有好多事儿要做。
加油。
- 优购微零售-已上线项目中,完全使用react-native的一些体会
- 使用CocoaPods 将 React Native 导入已有的项目中
- 在已有的项目中引入react native
- React-Native项目中使用TabBar
- React-Native项目中使用动画-Animated
- React-Native项目中使用TabBar
- 项目中使用Redis的一些总结和体会
- 4、在已有的Android应用中使用React Native
- react-native中抽屉的使用(react-native-drawer)
- React-native中DatePickerAndroid的使用
- React Native中定时器的使用
- React Native中ListView的简单使用
- React Native中组件的封装使用
- 4.React Native接入原生项目的一些问题
- React-Native中导航组件react-navigation的使用
- react native的一些基本概念
- react native的一些基本概念
- React Native的一些问题
- HTML拼音/音标注释标记ruby和它的子元素rt/rp
- Spring与Mybatis整合
- android布局文件中一些属性介绍
- 海量数据处理面试题方法总结
- 最长递增子序列 (Longest Increasing Subsequence)
- 优购微零售-已上线项目中,完全使用react-native的一些体会
- 设计模式:(3)生成器模式 (Builder)
- 声明父类,new子类--java和c#的区别
- Word技巧
- 粗浅看 缓存技术
- 数据结构_P13
- Minor GC、Major GC和Full GC之间的区别
- 强烈建议使用guava
- 电商之梳理dubbo相关知识---分布式架构