ReactNative Navigator

之前Demo有个问题一直没有解决.
所以要着手解决一些基本问题.

学习native也就2个星期的时间.所以简单的写下.

本次项目相对来谁比较简单,只有一些数字的展示功能,页面也并不复杂.
所以公司选用技术为ReactNative.

1:本文举例使用的插件:react-native-tab-navigator ,选项卡形式的导航

react-native-tab-navigator
为了方便,我都是直接COPY到项目里,install确实太费时间,而且很多时候还总报错.
直接copy到node_modules目录下.
国内的网也就这么回事.

如果直接在主页使用这个插件会造成跳入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>
        );    
  }
}

如果把导航页直接单独跳转的话 后面就可以直接跳转导航,而不妨碍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}}>我是第一个选项卡,直接书写出的视图!</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>      
   );
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容