React Nativeナビゲータのreact-native-scrollable-tab-view

React Nativeの開発では、TabコントローラはTabBarIOSとViewPagerAndroidの2種類が公式に提供されています.TabBarIOSは、IOSプラットフォームViewPagerAndroidにのみ適用され、Androidプラットフォームにのみ適用されます(厳密にはそうではありません.Tabを自分で実現する必要があるからです).プロジェクト開発では、react-navigationや、本明細書で説明するreact-native-scrollable-tab-viewなど、オープンソース互換性の良いサードパーティ製ライブラリを優先的に選択します.react-native-scrollable-tab-viewは上部のTab切替だけでなく、下部の切替も実現できます.
ツールバーの
名前
を選択します.
説明
renderTabBar
function
TabBarのスタイルは、DefaultTabBarとScrollableTabBarの2つのデフォルトを提供します.
tabBarPosition
string
top:画面上部にあるbottom:画面下部にあるoverlayTop:画面上部にあり、コンテンツビューの上に浮かぶ(色区分:ビューに色があり、Tabバーに色がない)overlayBottom:画面下部にあり、コンテンツビューの上に浮かぶ(色区分:ビューに色があり、Tabバーに色がない)
onChangeTab
function
Tab切り替え後にこのメソッドがトリガーされます
onScroll
function
ビューがスライドしている間にこのメソッドがトリガーされます.Floatタイプの数字が含まれています.範囲は[0,tabの数-1]です.
locked
bool
指がビューをドラッグできるかどうかを示し、デフォルトはfalseです.
initialPage
integer
初期化時に選択されたタブは下付きで、デフォルトは0です.
page
integer
選択したタブを設定します.
詳細は、「ソース」を参照してください.
トップタブ切り替え
1.取付$ npm install --save react-native-scrollable-tab-view2.効果図
3.インスタンスコード

import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
} from 'react-native';

import ScrollableTabView,
{
  DefaultTabBar,
  ScrollableTabBar
} from 'react-native-scrollable-tab-view';

var Dimensions = require('Dimensions');
var ScreenWidth = Dimensions.get('window').width;

export default class App extends Component{
  render() {
    return (
       }
        tabBarUnderlineStyle={styles.lineStyle}
        tabBarActiveTextColor='#FF0000'
      >
          
          
          
          
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    backgroundColor: '#F5FCFF',
  },
  lineStyle: {
    width: ScreenWidth / 4,
    height: 2,
    backgroundColor:'red'
  },
  textStyle: {
    flex: 1,
    fontSize: 20,
    marginTop: 20,
    textAlign:'center'
  },
});

ボトムタブ切り替え
1.$ npm install react-native-scrollable-tab-view --saveナビゲーション$ npm install react-native-vector-icons --saveアイコン$ npm install --save prop-types PropType注意:インストール後、必ず次のコマンドを入力してください:$ react-native link2.インスタンスコード新規srcフォルダを作成し、その下にMyTabBarを作成する.jsファイル.

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  TouchableOpacity,
  Text
} from 'react-native';

import PropTypes from 'prop-types';

import Icon from 'react-native-vector-icons/Ionicons';

export default class MyTabBar extends Component { 
    static propTypes = {
        goToPage: PropTypes.func, //      tab   
        activeTab: PropTypes.number, //       tab  
        tabs: PropTypes.array, //   tabs  
        tabNames: PropTypes.array, //   Tab  
        tabIconNames: PropTypes.array, //   Tab  
    };

    componentDidMount() {
        // Animated.Value     [0, tab  -1]
        this.props.scrollValue.addListener(this.setAnimationValue);
    }

    setAnimationValue({value}) {
        console.log('   ：'+value);
    }

    //  tabbar         
    renderTabOption(tab, i) {
        let color = this.props.activeTab == i ? "#1FB9FF" : "#ADADAD"; //   i        tab，       
        return (
            //                   
            this.props.goToPage(i)} style={styles.tab} key={tab}>
                
                    
                    
                        {this.props.tabNames[i]}
                    
                
            
        );
    }
  render() { 
    return (
        
            {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
        
        
    );
  }
}

const styles = StyleSheet.create({
    tabs: {
        flexDirection: 'row',
        height: 50,
    },

    tab: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },

    tabItem: {
        flexDirection: 'column',
        alignItems: 'center',
    },
  
})

App.js

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text
} from 'react-native';

import ScrollableTabView, { DefaultTabBar,ScrollableTabBar}from 'react-native-scrollable-tab-view';
import Icon from 'react-native-vector-icons/Ionicons';
import IconFont from 'react-native-vector-icons/FontAwesome';

import MyTabBar from './src/MyTabBar';

export default class App extends Component { 
  constructor(props) {
    super(props);
    this.state = {
      tabNames: ['  ', '  ', '  ', '  '],
      tabIconNames: ['ios-home', 'ios-grid', 'ios-book', 'ios-contact'],

    }
  }
  render() { 
    let tabNames = this.state.tabNames;
    let tabIconNames = this.state.tabIconNames;
    return (
       }
        tabBarPosition={'bottom'}
        locked={false}
        initialPage={0}
        prerenderingSiblingsNumber={1}
      >
        
            
            
                      
            
        

        
          
          
                Apple        
            
        
        
          
          
                android        
            
        

        
          
          
                html5        
            
        


      
        
    );
  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      backgroundColor: '#F5FCFF',
    },
    center: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 5,
    },
  
})

3.効果図