使用介绍
scrollable-tab-view 是RN的第三方组件,使用的时候我们需要做的是用npm导入到项目的组件管理文件夹下
组件下载地址:
https://github.com/skv-headless/react-native-scrollable-tab-view
安装方法:
1:终端窗口"cd 项目工程目录里"
执行命令:npm install react-native-scrollable-tab-view --save
2:安装成功后在工程文件里引入:
import ScrollableTabView from 'react-native-scrollable-tab-view'
这个组件:![]()
具体实例代码:1.index.js。/** * Sample React Native App * https://github.com/facebook/react-native * @chenjialin */ import React, { PureComponent,Component } from 'react'; import { observable, computed, autorun, action } from 'mobx'; import {observer} from 'mobx-react/native'; import demo from './mobx'; import FoodEncyclopedia from './js/FoodEncyclopedia'; import Feed from './js/Feed' import Profile from './js/Profile' import TabBar from './js/TabBar' import ScrollableTabView from 'react-native-scrollable-tab-view' import { AppRegistry, StyleSheet, Text, View, TextInput, AlertIOS, StatusBar, Navigator, } from 'react-native'; const tabTitles = ['食物百科', '逛吃', '我的'] const tabIcons = [ require('./resource/ic_tab_search.png'), require('./resource/ic_tab_homepage.png'), require('./resource/ic_tab_my.png') ] const tabSelectedIcon = [ require('./resource/ic_tab_search_select.png'), require('./resource/ic_tab_homepage_select.png'), require('./resource/ic_tab_my_select.png') ] export default class HelloWorld extends PureComponent { counter=0; _configureScene = route => { if (route.sceneConfig) return route.sceneConfig return { ...Navigator.SceneConfigs.PushFromRight, gestures: {} // 禁用左滑返回手势 } } _renderScene = (route, navigator) => { let Component = route.component return <Component navigator={navigator}{...route.passProps}/> } inc=()=>{ ++this.counter; }; dec=()=>{ --this.counter; }; OnChangeText=v=>{ try { this.counter=parseInt(v); }catch(err) { } }; OnClickText=(title)=>{ alert('title='+title); } render() { const initialPage = TabViewBar; const initialPageName = 'TabBarView'; return ( <View style={{flex: 1}}> <StatusBar barStyle={'light-content'}/> <Navigator initialRoute={{name: initialPageName, component: initialPage}} configureScene={this._configureScene} renderScene={this._renderScene} /> </View> ); } } class TabViewBar extends Component { _onChangeTabs = ({i}) => 'light-content'; render() { return ( <ScrollableTabView renderTabBar={() => <TabBar tabNames={tabTitles} tabIconNames={tabIcons} selectedTabIconNames={tabSelectedIcon} /> } tabBarPosition='bottom' locked scrollWithoutAnimationz onChangeTab={this._onChangeTabs} > <FoodEncyclopedia tabLabel="Food" navigator={this.props.navigator}/> <Feed tabLabel="Home" navigator={this.props.navigator}/> <Profile tabLabel="Profile" navigator={this.props.navigator}/> </ScrollableTabView> ) } } const HeaderView=({title,message})=>{ return( <View style={styles.container}> <Text style={styles.welcome} onPress={()=>{demo.OnclickChanges('bbbbbbb')}}>{this.counter}+='bbbbbbb'+{demo.user}</Text> <Text style={styles.welcome} onPress={this.dec}>{this.counter}+='CCCCCCCCssss'</Text> <Text style={styles.welcome} onPress={this.dec}> {title }+ ''+{message} </Text> <TextInput value={`${this.counter}`} style={styles.value} onChangeText={this.OnChangeText}/> </View> ) }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, value:{ paddingHorizontal:10, paddingVertical:8, width:100, marginLeft:120, }, }); AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
2.TabBar.js类代码(核心类)
/** * Created by chenjialin on 17/2/21. */ import React, { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity, Image, } from 'react-native'; import Common from './constants'; export default class TabBar extends Component { static propType = { goToPage : React.PropTypes.func, activeTab : React.PropTypes.number, tabs : React.PropTypes.array, tabNames : React.PropTypes.array, tabIconNames: React.PropTypes.array }; componentDidMount() { this.props.scrollValue.addListener(this.setAnimationValue); } setAnimationValue({value}) { console.log(value); } render() { return ( <View style={[styles.tabs, {borderTopWidth: Common.window.onePR}]}> {this.props.tabs.map((tab, i) => { let color = this.props.activeTab === i ? 'red' : 'gray'; let icon = this.props.activeTab == i ? this.props.selectedTabIconNames[i] : this.props.tabIconNames[i]; return ( <TouchableOpacity key={i} activeOpacity={0.8} style={styles.tab} onPress={()=>this.props.goToPage(i)} > <View style={styles.tabItem}> <Image style={styles.icon} source={icon} /> <Text style={{color: color, fontSize: 12}}> {this.props.tabNames[i]} </Text> </View> </TouchableOpacity> ) })} </View> ) } } const styles = StyleSheet.create({ tabs: { flexDirection: 'row', height: 49, borderTopColor: '#d9d9d9', }, tab: { flex: 1, justifyContent: 'center', alignItems: 'center', }, tabItem: { flexDirection: 'column', alignItems: 'center', justifyContent: 'space-around' }, icon: { width: 26, height: 26, marginBottom: 2 } })
演示如图:![]()
![]()
![]()
![]()
![]()
![]()