React Native：自定义标签栏答案

【问题标题】：React Native : Custom TabbarReact Native：自定义标签栏
【发布时间】：2018-09-05 12:24:17
【问题描述】：

React native : 如何自定义标签栏，如下图所示？

【问题讨论】：

标签： reactjs react-native reactive-programming

【解决方案1】：

1) you can use this library to create tabs react-native-scrollable-tab-view.
2) Then it has a prop (renderTabBar) here you can pass your own custom tab bar.

<ScrollableTabView renderTabBar={() => <DefaultTabBar tabStyle={{color: 'red'}} />} />

one tip that i am giving.

make a file name it CustomTabBar copy all the code from libraries DefaultTabBar and past it in your CustomTabBar.

now change its designs the way you want it to be and use it like this. This way you will have to do the least amount of work.

<ScrollableTabView renderTabBar={() => <CustomTabBar/>} />

【讨论】：

【解决方案2】：

也许这就是你需要的解决方案

1、安装：switch-react-native

npm i switch-react-native

2、使用库：

import React, { Component } from 'react';
import { View } from 'react-native';
import { Switch } from 'switch-react-native';

class SwitchExample extends Component {
  render() {
    return (
      <View>
        <Switch
          height={40}
          width={300}
          activeText={`Active Text`}
          inActiveText={`InActive Text`}
          onValueChange={(value: any) => console.log(value)}
        />
      </View>
    );
  }
}

【讨论】：