使用react-native-tab-navigator创建底部Tab导航

1.使用npm安装react-native-tab-navigator

   npm install react-native-tab-navigator --save

2.页面引入

   import TabNavigator from 'react-native-tab-navigator

3.完整代码



import React, {Component} from 'react';

import { StyleSheet,  View, Image} from 'react-native';

import TabNavigator from 'react-native-tab-navigator'

type Props = {};

export default class App extends Component<Props> {

    constructor(props){

        super(props);

        this.state = {

          selectedTab: 'tb_popular',      // 默认选择第一个

        }

    }

  render() {

    return (

        //selected：所选tab项指代名称

        //selectedTitleStyle：设置选中颜色

        //title： tab项展示名称

        //renderIcon：默认icon

        //renderSelectedIcon ：选中icon

        //badgeText：徽标数

        <TabNavigator>

          <TabNavigator.Item

            selected = {this.state.selectedTab == 'tb_popular'}

            selectedTitleStyle = {{ color: 'red'}}

            title = '最热'

            renderIcon = { () => <Image style={styles.image} source={require('./res/images/ic_polular.png')} /> }

            renderSelectedIcon = { () => <Image style={[styles.image,{tintColor:'red'}]} source = {require('./res/images/ic_polular.png')} />}

            badgeText = '1'

            onPress = {() => this.setState({ selectedTab: 'tb_popular'})}>

              <View style = {styles.page}></View>

          </TabNavigator.Item>

          <TabNavigator.Item

            selected = { this.state.selectedTab == 'tb_trending'}

            selectedTitleStyle = {{ color: 'red'}}

            title = "趋势"

            renderIcon = { () => <Image style={styles.image} source={ require('./res/images/ic_trending.png')}/>}

            renderSelectedIcon = { () => <Image style={[styles.image,{tintColor:'red'}]} source = {require('./res/images/ic_trending.png')} />}

            onPress = { () => this.setState({ selectedTab: 'tb_trending'})}>

              <View style = {styles.page1}></View>

          </TabNavigator.Item>

            <TabNavigator.Item

                selected = {this.state.selectedTab == 'tb_favorite'}

                selectedTitleStyle = {{ color: 'red'}}

                title = '收藏'

                renderIcon = { () => <Image style={styles.image} source={require('./res/images/ic_polular.png')} /> }

                renderSelectedIcon = { () => <Image style={[styles.image,{tintColor:'red'}]} source = {require('./res/images/ic_polular.png')} />}

                badgeText = '1'

                onPress = {() => this.setState({ selectedTab: 'tb_favorite'})}>

                <View style = {styles.page}></View>

            </TabNavigator.Item>

            <TabNavigator.Item

                selected = { this.state.selectedTab == 'tb_my'}

                selectedTitleStyle = {{ color: 'red'}}

                title = "我的"

                renderIcon = { () => <Image style={styles.image} source={ require('./res/images/ic_trending.png')}/>}

                renderSelectedIcon = { () => <Image style={[styles.image,{tintColor:'red'}]} source = {require('./res/images/ic_trending.png')} />}

                onPress = { () => this.setState({ selectedTab: 'tb_my'})}>

                <View style = {styles.page1}></View>

            </TabNavigator.Item>

        </TabNavigator>

    );

  }

}

const styles = StyleSheet.create({

    page:{

      flex:1,

      backgroundColor:'red',

    },

    page1:{

      flex:1,

      backgroundColor:'yellow'

    },

    image:{

      height:22,

      width:22

    }

});

4.执行结果

巴特西

react-native学习（一）————使用react-native-tab-navigator创建底部导航

使用react-native-tab-navigator创建底部Tab导航

最新文章

热门文章