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

1、安装yarn add react-native-tab-navigato2、使用(1)import TabNavigator from 'react-native-tab-navigator';(2)定义statestate={selectedTab:''}<TabNavigatorsceneStyle={{...}}tabBarStyletabBarShadowStyle>&lt

神奇大叔

472人浏览 · 2020-08-31 14:50:34

神奇大叔 · 2020-08-31 14:50:34 发布

使用该导航器的组件需要将,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