Example01

DEMO

// App.js (new project)
import React, { Component } from 'react'
import { View, FlatList, Text } from 'react-native'
import ScrollableTabView, {
  DefaultTabBar
} from 'react-native-scrollable-tab-view'

class List extends Component {
  render() {
    // 模拟列表数据
    const mockData = [
      '富强',
      '民主',
      '文明',
      '和谐',
      '自由',
      '平等',
      '公正',
      '法治',
      '爱国',
      '敬业',
      '诚信',
      '友善'
    ]

    return (
      <FlatList
        data={mockData}
        renderItem={({ item }) => (
          <View
            style={{
              height: 80,
              backgroundColor: 'pink',
              marginBottom: 1,
              alignItems: 'center',
              justifyContent: 'center',
              color: 'white'
            }}
          >
            <Text>{item}</Text>
          </View>
        )}
      />
    )
  }
}

export default class Test extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <ScrollableTabView
          initialPage={1}
          collapsableBar={
            <View style={{ height: 200, backgroundColor: '#53d54F' }} />
          }
          renderTabBar={() => (
            <DefaultTabBar
              backgroundColor={'white'}
              activeTextColor={'black'}
              inactiveTextColor={'grey'}
              underlineStyle={{
                backgroundColor: 'black'
              }}
              style={{ borderColor: 'grey' }}
            />
          )}
        >
          <List tabLabel={'本站'} />
          <List tabLabel={'主页'} />
        </ScrollableTabView>
      </View>
    )
  }
}

// package.json

"dependencies": {
"react": "16.6.3",
"react-native": "0.58.5",
"react-native-scrollable-tab-view": "git+ssh://git@github.com:hrkw00/react-native-scrollable-tab-view.git#master"
},