Блог

Я использую

Вкладка const = createMaterialTopTabNavigator();

чтобы создать навигацию по вкладкам. Кажется, все работает, но я не могу выровнять индикатор панели вкладок в с отдельным элементом панели вкладок. В соответствии с дизайном должна быть ширина индикатора панели вкладок 100 , есть ли какой-либо способ сделать это?

 const Faq = () => {
  return (
    <SafeAreaView style={styles.container}>
      <View style={{ alignSelf: "flex-start", margin: 5 }}>
        <BackButton />
      </View>
      <Text style={styles.title}>F.A.Q</Text>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarStyle: {
            height: 65,
            elevation: 0,
            marginBottom: 20,
          },
          tabBarContentContainerStyle: {},
          tabBarItemStyle: {},
          tabBarIndicatorContainerStyle: {
          // borderWidth: 1,
          },
          tabBarLabelStyle: styles.tabBarLabel,
          tabBarIndicatorStyle: styles.tabBarIndicator,
          tabBarActiveTintColor: "#3E3E3E",
          tabBarInactiveTintColor: "#A4A8AE",
          headerShown: false,
          })}
         >
      <Tab.Screen name="Shopping" component={BuyerScreen} />
      <Tab.Screen name="Setting" component={BusinessScreen} />
     </Tab.Navigator>
    </SafeAreaView>
 );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    paddingHorizontal: 20,
  },
  title: {
    marginTop: 15,
    fontSize: 55,
    fontFamily: "PhotographSignature",
    letterSpacing: 1,
    textAlign: "center",
    color: "#3e3e3e",
  },
    tabBarLabel: {
    fontSize: 16,
    fontFamily: "Raleway-Regular",
    textAlign: "center",
    lineHeight: 18.78,
    letterSpacing: 1,
  },
  tabBarIndicatorContainerStyle: {
    borderColor: "black",
    borderWidth: 1,
  },
  tabBarIndicator: {
    width: 100,
    height: 5,
    backgroundColor: "#B8D2C7",
  },
});