reactNative底部导航菜单栏实现

来源：互联网发布：电脑游戏录制视频软件编辑：程序博客网时间：2024/05/16 04:39

实现效果图：

需要实现的效果：点击下方最热、趋势、收藏、我的，相应的标签图标会变蓝色，App上方

渲染相应的页面。

实现思路：

1、在项目中引入第三方reactNative插件 react-native-tab-navigator

npm install react-native-tab-navigator -save

该插件主要提供的功能是通过TabNavigator创建底部标签横向列表，管理TabNavigatorItem

下载下来react-native-tab-navigator 查看源码

TabNavigator.js ：通过 TabNavigator.ite,=TabNavigator.Item 这句代码可以分析出，

TabNavigator.Item是TabNavigator下属组件

通过查看TabNavigator.Item的源码：

static propTypes = {
    renderIcon: PropTypes.func,
    renderSelectedIcon: PropTypes.func,
    badgeText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    renderBadge: PropTypes.func,
    title: PropTypes.string,
    titleStyle: Text.propTypes.style,
    selectedTitleStyle: Text.propTypes.style,
    tabStyle: View.propTypes.style,
    selected: PropTypes.bool,
    onPress: PropTypes.func,
    allowFontScaling: PropTypes.bool,
};

可以分析出TabNavigator.Item的

未选中图标：renderIcon

选中图标： renderSelectedIcon

标题：title

标题风格:titleStyle

选中标题风格: selectedTitleStyle

是否为选中状态:selected

点击后执行的方法:onPress

2.点击onPress方法

设置点击tab图标后改变selectedTab的state状态值

，页面重新渲染，是内容页面和标签图标重新渲染

代码实现:

HomePage.js:

export default class HomePage extends Component{    constructor(props){        super(props);        this.state={          selectedTab:'popular', //默认选中的选项卡        };    }    render(){        return <View style={styles.container}>                <TabNavigator>                    <TabNavigator.Item                        selected={this.state.selectedTab==='popular'}                        title="最热"                        selectedTitleStyle={{color:'#63B8FF'}}                        renderIcon={()=><Image style={styles.icon} source={require('../../res/images/ic_popular.png')} />}                        renderSelectedIcon={() =>                        <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_popular.png')}/>}                        onPress={()=>this.setState({selectedTab:'popular'})}                    >                        {/*选项卡对应的页面*/}                        <PopularPage/>                    </TabNavigator.Item>                    <TabNavigator.Item                        selected={this.state.selectedTab==='trending'}                        title="趋势"                        selectedTitleStyle={{color:'#63B8FF'}}                        renderIcon={()=><Image style={styles.icon} source={require('../../res/images/ic_trending.png')} />}                        renderSelectedIcon={() =>                        <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_trending.png')}/>}                        onPress={()=>this.setState({selectedTab:'trending'})}                    >                        <View style={{backgroundColor:'#0F0',flex:1}}></View>                    </TabNavigator.Item>                    <TabNavigator.Item                        selected={this.state.selectedTab==='favorite'}                        title="收藏"                        selectedTitleStyle={{color:'#63B8FF'}}                        renderIcon={()=><Image style={styles.icon} source={require('../../res/images/ic_favorite.png')} />}                        renderSelectedIcon={() =>                        <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_favorite.png')}/>}                        onPress={()=>this.setState({selectedTab:'favorite'})}                    >                        <CustomViewPage {...this.props} />                    </TabNavigator.Item>                    <TabNavigator.Item                        selected={this.state.selectedTab==='my'}                        title="我的"                        selectedTitleStyle={{color:'#63B8FF'}}                        renderIcon={()=><Image style={styles.icon} source={require('../../res/images/ic_my.png')} />}                        renderSelectedIcon={() =>                        <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_my.png')}/>}                        onPress={()=>this.setState({selectedTab:'my'})}                    >                        <MyPage {...this.props} />                    </TabNavigator.Item>                </TabNavigator>            </View>    }        componentWillUnmount(){        this.listener.remove();    }}const styles=StyleSheet.create({    container:{        flex:1    },    icon:{        width:26,        height:26    }});

0 0