优购微零售-已上线项目中，完全使用react-native的一些体会

优购微零售，是一款依托百丽集团的品牌商品，依靠分享推荐商品，既满足购物需求，同时又能够获得分享红利。

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;
  }

2. 跳转传参

我们在使用

this.props.navigator.push({
  component: 跳转到的页面,参数一：参数值
});

发现，这个参数一无法在跳转的页面里面接收。

仔细检查一下我们的navigator系统,我们发现,在设置navigator的时候，我们使用了：

 <Component {...route.params} navigator={navigator} />

按照网上一些做法，通过他们都是这样来传值的：

this.props.navigator.push({
  component: @R_116_404@面,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)'}}>
							 			<Text>店铺的名称</Text>
							 </View>
							 <View style={{backgroundColor: 'rgba(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，还有好多事儿要做。

加油。

原文链接：https://www.f2er.com/react/306640.html

优购微零售-已上线项目中，完全使用react-native的一些体会

猜你在找的React相关文章