之前Demo有個問題一直沒有解決.
所以要著手解決一些基本問題.

學(xué)習(xí)native也就2個星期的時間.所以簡單的寫下.

本次項(xiàng)目相對來誰比較簡單,只有一些數(shù)字的展示功能,頁面也并不復(fù)雜.
所以公司選用技術(shù)為ReactNative.

1:本文舉例使用的插件：react-native-tab-navigator ，選項(xiàng)卡形式的導(dǎo)航

react-native-tab-navigator
為了方便,我都是直接COPY到項(xiàng)目里,install確實(shí)太費(fèi)時間,而且很多時候還總報(bào)錯.
直接copy到node_modules目錄下.
國內(nèi)的網(wǎng)也就這么回事.

如果直接在主頁使用這個插件會造成跳入2級頁面的時候tabbar沒辦法隱藏

直接代碼

render() {        
      return (           
             <View style={{flex: 1}}>               
                   <Navigator     
                         ref='navigator'           
                         style={styles.navigator}
                        configureScene={this.configureScene}
                        renderScene={this.renderScene}
                        initialRoute={{ 
                     component:Login,           
                     name: '登陸'          }}               
                   />            
            </View>
        );    
  }
}

如果把導(dǎo)航頁直接單獨(dú)跳轉(zhuǎn)的話 后面就可以直接跳轉(zhuǎn)導(dǎo)航,而不妨礙tabbar的隱藏

以下為LOGIN 頁面tabbar

  render() {    
        return (
           <TabNavigatortabBarStyle={styles.tab} > 
                 <TabNavigator.Item 
                       selected={this.state.selectedTab === 'home'} 
                       title="Home"
                       renderIcon={() => <Image source={require('./res/home_normal.png')} />}                     
                       renderSelectedIcon={() => <Image source={require('./res/home_focus.png')} />}            
                        badgeText="61"
                        onPress={() => this.setState({ selectedTab: 'home' })}>
                     <View style={{flex:1,backgroundColor:'#fff',justifyContent:'center'}}>
                          <Text style={{fontSize:20}}>我是第一個選項(xiàng)卡础爬，直接書寫出的視圖!</Text>       
                     </View>            
                 </TabNavigator.Item>
                 <TabNavigator.Item            
                      selected={this.state.selectedTab === 'profile'}
                      title="Profile"
                      renderIcon={() => <Image source={require('./res/personal_normal.png')} />}
                      renderSelectedIcon={() => <Image source={require('./res/personal_focus.png')} />}
                      onPress={() => this.setState({ selectedTab: 'profile' })}>                           
                     <TestPage/> 
                 </TabNavigator.Item>
          </TabNavigator>      
   );
  }