React Native: пользовательская вкладка

Question

React native: Как настроить панель вкладок, как показано на рисунке ниже?

Answer 1

Может быть, это то решение, которое вам нужно

1, установка: switch-реакции-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>
    );
  }
}

Answer 2

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