React Native三方组件之scrollable-tab-view

使用介绍

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
    }
})

演示如图：