rn 底部导航栏react-native-tab-navigator

约定不等于承诺〃 2021-07-24 22:44 614阅读 0赞

使用该导航器的组件需要将,navigation=this.props.navigation传入
    通过设置selectedTab的值确定初始化组件
    
    1、安装
    	yarn add react-native-tab-navigato
    
    2、使用
    	(1)import TabNavigator from 'react-native-tab-navigator';
    		
    	(2)定义state
    	 state={
    		selectedTab:''
    	 }
    	
    	<TabNavigator
    		sceneStyle={
       {...}}
    		tabBarStyle
    		tabBarShadowStyle
    	>
    	  <TabNavigator.Item
    	    selected={this.state.selectedTab === 'home'}
    	    
    	    title="Home"	导航栏标题
    	    titleStyle
    	    selectedTitleStyle
    	    
    	    renderIcon={() => <Image source={...} />}
    	    renderSelectedIcon={() => <Image source={...} />}
    	    
    	    badgeText="1"  导航栏数字显示
    	    onPress={() => this.setState({ selectedTab: 'home' })}>
    	    
    	    显示内容
    	  </TabNavigator.Item>
    	  <TabNavigator.Item
    	    selected={this.state.selectedTab === 'profile'}
    	    title="Profile"
    	    renderIcon={() => <Image source={...} />}
    	    renderSelectedIcon={() => <Image source={...} />}
    	    renderBadge={() => <CustomBadgeView />}
    	    onPress={() => this.setState({ selectedTab: 'profile' })}>
    	    显示内容
    	  </TabNavigator.Item>
    	</TabNavigator>
    
    	sceneStyle具有的属性
    	  "display",
    	  "width",
    	  "height",
    	  "start",
    	  "end",
    	  "top",
    	  "left",
    	  "right",
    	  "bottom",
    	  "minWidth",
    	  "maxWidth",
    	  "minHeight",
    	  "maxHeight",
    	  "margin",
    	  "marginVertical",
    	  "marginHorizontal",
    	  "marginTop",
    	  "marginBottom",
    	  "marginLeft",
    	  "marginRight",
    	  "marginStart",
    	  "marginEnd",
    	  "padding",
    	  "paddingVertical",
    	  "paddingHorizontal",
    	  "paddingTop",
    	  "paddingBottom",
    	  "paddingLeft",
    	  "paddingRight",
    	  "paddingStart",
    	  "paddingEnd",
    	  "borderWidth",
    	  "borderTopWidth",
    	  "borderStartWidth",
    	  "borderEndWidth",
    	  "borderRightWidth",
    	  "borderBottomWidth",
    	  "borderLeftWidth",
    	  "position",
    	  "flexDirection",
    	  "flexWrap",
    	  "justifyContent",
    	  "alignItems",
    	  "alignSelf",
    	  "alignContent",
    	  "overflow",
    	  "flex",
    	  "flexGrow",
    	  "flexShrink",
    	  "flexBasis",
    	  "aspectRatio",
    	  "zIndex",
    	  "direction",
    	  "shadowColor",
    	  "shadowOffset",
    	  "shadowOpacity",
    	  "shadowRadius",
    	  "transform",
    	  "transformMatrix",
    	  "decomposedMatrix",
    	  "scaleX",
    	  "scaleY",
    	  "rotation",
    	  "translateX",
    	  "translateY",
    	  "backfaceVisibility",
    	  "backgroundColor",
    	  "borderColor",
    	  "borderTopColor",
    	  "borderRightColor",
    	  "borderBottomColor",
    	  "borderLeftColor",
    	  "borderStartColor",
    	  "borderEndColor",
    	  "borderRadius",
    	  "borderTopLeftRadius",
    	  "borderTopRightRadius",
    	  "borderTopStartRadius",
    	  "borderTopEndRadius",
    	  "borderBottomLeftRadius",
    	  "borderBottomRightRadius",
    	  "borderBottomStartRadius",
    	  "borderBottomEndRadius",
    	  "borderStyle",
    	  "opacity",
    	  "elevation"

代码示例:

import React,{ Component} from 'react'
    import { 
        View,
        Text,
        StyleSheet,
        Image
      } from 'react-native'
      
      import TabNavigator from 'react-native-tab-navigator';
      import Home from '../home'
      import HourList from '../hourlist'
      import Ht from '../ht'
      
      class App extends Component{ 
          state={ 
            selectedTab:'home'
          }
      
          render()
          { 
              return(
                <TabNavigator
                  tabBarStyle={ { backgroundColor:'white',height:70,color:'red'}}
                  
                 
                >
                  <TabNavigator.Item
                    selected={ this.state.selectedTab === 'home'}
                    title="首页"
                    titleStyle={ { marginTop:10}}
                    selectedTitleStyle={ { color:'green'}}
                    renderIcon={ () => <Image style={ { height:40,width:60}} source={ { uri:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1131066910,3787902825&fm=26&gp=0.jpg'}} />}
                    renderSelectedIcon={ () => <Image style={ { height:40,width:60}} source={ { uri:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2604709958,3677471493&fm=26&gp=0.jpg'}} />}
                    onPress={ () => this.setState({  selectedTab: 'home' })}>
                      
                    <Home navigation={ this.props.navigation}/>
                  </TabNavigator.Item>
                  <TabNavigator.Item
                    selected={ this.state.selectedTab === 'profile'}
                    title="海淘"
                    titleStyle={ { marginTop:10}}
                    selectedTitleStyle={ { color:'green'}}
                    renderIcon={ () => <Image style={ { height:40,width:60}} source={ { uri:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1131066910,3787902825&fm=26&gp=0.jpg'}} />}
                    renderSelectedIcon={ () => <Image style={ { height:40,width:60}} source={ { uri:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2604709958,3677471493&fm=26&gp=0.jpg'}} />}
                    onPress={ () => this.setState({  selectedTab: 'profile' })}>
                    <HourList navigation={ this.props.navigation}/>
                  </TabNavigator.Item>
                  <TabNavigator.Item
                    selected={ this.state.selectedTab === 'one'}
                    titleStyle={ { marginTop:10}}
                    title="一小时"
                    selectedTitleStyle={ { color:'green'}}
                    renderIcon={ () => <Image style={ { height:40,width:60}} source={ { uri:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1131066910,3787902825&fm=26&gp=0.jpg'}} />}
                    renderSelectedIcon={ () => <Image style={ { height:40,width:60}} source={ { uri:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2604709958,3677471493&fm=26&gp=0.jpg'}} />}
                    
                    onPress={ () => this.setState({  selectedTab: 'one' })}>
                    <Ht navigation={ this.props.navigation}/>
                  </TabNavigator.Item>
                </TabNavigator>
              )
          }
      }
    
    const styles = StyleSheet.create({ 
    
    
    })
    
    export default App