優購微零售，是一款依託百麗集團的品牌商品，依靠分享推薦商品，既滿足購物需求，同時又能夠獲得分享紅利。

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: {
     引數一：引數值
   }
})
 

但是這種方式，在我們這裡始終無法獲取值，真不知道啥原因，求大神指點。

最後我們，在設定navigator的時候，這麼寫的：

 <Component {...route.params} navigator={navigator} route={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即可。

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，還有好多事兒要做。

加油。