优购微零售,是一款依托百丽集团的品牌商品,依靠分享推荐商品,既满足购物需求,同时又能够获得分享红利。
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,还有好多事儿要做。
加油。