React Native：自定义标签栏

Question

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

Answer 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/>} />

Answer 2

也许这是您需要的解决方案

1，安装：switch-react-native

npm i switch-react-native

2，使用lib：

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