React-native 底部导航栏(二)
时间:2019-10-30
本文章向大家介绍React-native 底部导航栏(二),主要包括React-native 底部导航栏(二)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、组件安装:npm install react-native-router-flux --save
2、定义菜单图片和文字:
import React, { Component } from 'react'; import { View, Image, Text, StyleSheet,Dimensions } from 'react-native'; class TabIcon extends Component { constructor(props){ super(props); } render(){ let selected=this.props.focused; let data={ home:{ title:"首页", icon:!selected?require("../resource/images/home.png"):require("../resource/images/home_selected.png") }, movies:{ title:"电影", icon:!selected?require("../resource/images/movies.png"):require("../resource/images/movies_selected.png") }, theaters:{ title:"影院", icon:!selected?require("../resource/images/theater.png"):require("../resource/images/theater_selected.png") }, me:{ title:"我", icon:!selected?require("../resource/images/me.png"):require("../resource/images/me_selected.png") } } let param=data[this.props.navigation.state.key]; return <View style={styles.tabbarContainer}> <Image style={{ width: 25, height: 25,resizeMode:'contain' }} source={param.icon} /> <Text style={[styles.tabbarItem,selected&&{color:'#F08519'}]}>{param.title}</Text> </View> } } const styles = StyleSheet.create({ tabbarContainer:{ flex:1, alignItems:"center", justifyContent:"center", width:Dimensions.get('window').width/4 }, tabbarItem:{ marginTop:5, textAlign:"center" } }); module.exports = TabIcon;
- 判断菜单是否被选中this.props.focused在老版本的react-native-router-flux使用this.props.selected;
- 取当前菜单this.props.navigation.state.key在老版本的react-native-router-flux使用this.props.sceneKey
3、定义底部导航栏:
import React, { Component } from 'react'; import { Provider } from 'react-redux'; import PropTypes from 'prop-types'; import { View, Text, BackAndroid, StyleSheet } from 'react-native'; import { Scene, Router, TabBar, Modal, Schema, Actions, Reducer, ActionConst } from 'react-native-router-flux'; import { connect } from 'react-redux'; import LoginPage from './modules/auth/containers/loginPage'; import HomeIndex from './modules/home/containers/indexPage'; import TabIcon from './common/tabIcon'; class AppRoot extends Component { static propTypes = { dispatch: PropTypes.func } constructor(props) { super(props); } createReducer(params) { const defaultReducer = Reducer(params); return (state, action) => { this.props.dispatch(action); return defaultReducer(state, action); }; } onExitApp(){ BackAndroid.exitApp(); return true; } render() { return ( <Router onExitApp={this.onExitApp} createReducer={ this.createReducer.bind(this) } scenes={ scenes } > </Router > ) } } const styles = StyleSheet.create({ tabBarStyle: { backgroundColor: '#fff', height:64 }, tabBarSelectedItemStyle: { backgroundColor: '#fff' }, titleStyle: { color: '#fff' }, }) const scenes = Actions.create( <Scene key="root" hideNavBar={true}> <Scene key="login" component={LoginPage} title="登录" hideNavBar={true} /> <Scene key="tabbar" initial tabs={true} tabBarPosition="bottom" showLabel={false} tabBarStyle={styles.tabBarStyle} tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle} titleStyle={styles.titleStyle}> <Scene key="home" hideNavBar={true} component={HomeIndex} icon={TabIcon} titleStyle={styles.titleStyle}/> <Scene key="movies" hideNavBar={true} component={HomeIndex} icon={TabIcon} titleStyle={styles.titleStyle} /> <Scene key="theaters" hideNavBar={true} component={HomeIndex} icon={TabIcon} titleStyle={styles.titleStyle} /> <Scene key="me" hideNavBar={true} component={LoginPage} icon={TabIcon} titleStyle={styles.titleStyle} /> </Scene> </Scene> ) export default connect()(AppRoot);
由于此示例基于redux,为完整项目结构,还需做以下处理:
- 定义dispatch
import PropTypes from 'prop-types'; ... class AppRoot extends Component { static propTypes = { dispatch: PropTypes.func } ... }
- 使用connect连接React组件
export default connect()(AppRoot);
GIT源码地址:react-native-demo 分支名称:tabbar
请查看原文:https://www.jianshu.com/p/ab7eb90034fd
原文地址:https://www.cnblogs.com/focusHots/p/11765264.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- uni-app项目改用vue-cli npm运行报错及问题总汇
- 10.3【前端开发】背景图片:如何使用精灵图?
- Angular依赖注入官方文档的学习笔记
- jQuery 选择器
- MySQL系列之二进制日志Binlog学习笔记
- jQuery 效果
- jQuery 属性操作
- jQuery 文本属性值
- 10.4【前端开发】页面布局:如何理解 “CSS 视觉格式化模型”?
- Android Material UI控件之ShapeableImageView
- jQuery 元素操作
- jQuery 事件注册和事件处理
- 10.5 块级盒子模型(原盒子模型):两种盒子有什么不同?
- Android Material UI控件之MaterialButton
- jQuery (事件、拷贝)对象