Блог

Привет, я создаю приложение в React Native и хочу иметь настраиваемую панель вкладок. Я пробовал это с помощью React navigation, но я не могу понять, как стилизовать так, как я хочу…

Вот как я хочу, чтобы это выглядело в конечном итоге:

Страница информации

Страница фотографий

С помощью react navigation я могу провести пальцем по экрану и перейти на другую страницу. Так что это действительно хорошее удобство использования, которое я хотел бы сохранить (если это возможно, конечно)

Я пытался передать пользовательский компонент в навигаторе, но я не смог заставить его работать. Поэтому, когда он чистый и родной, он выглядит так прямо сейчас:

 const ProfileTabScreen = ({ navigation }) => {
  return (
    <ProfileTabNavigator.Navigator>
      <ProfileTabNavigator.Screen name="Info" component={ProfileInfoScreen} />
      <ProfileTabNavigator.Screen name="Photos" component={ProfilePhotosScreen} />
    </ProfileTabNavigator.Navigator>
  );
};
  

Компоненты ProfileInfo и ProfilePhotoScreen сейчас представляют собой просто пустые представления, по которым я могу перемещаться с помощью верхней навигации.

Редактировать

Спасибо @Hikaru Watanabe, я заглянул в createMaterialTopTabNavigator, и мне удалось сделать его похожим на картинку ниже. Это работает очень хорошо, единственное, о чем я беспокоюсь, это пробелы по бокам, которые я создал, потому что они сделаны с процентами (ширина: 45%, слева: 2,5%). Поэтому на больших экранах это может выглядеть немного по-другому. Это не оптимально, но я не мог понять, как еще это сделать. Это было единственное, что, казалось, работало и выглядело одинаково на iPhone и Android, на которых я тестировал.

Код для этого:

 const ProfileTabScreen = () => {
    return (
        <ProfileTabNavigator.Navigator tabBarOptions={{
            activeTintColor: Colors.COLOR_WHITE,
            labelStyle: {
                textTransform: "uppercase",
            },
            inactiveTintColor: Colors.COLOR_SUPER_DARK_GREY,
            indicatorStyle: {
                height: null,
                top: '10%',
                bottom: '10%',
                width: '45%',
                left: '2.5%',
                borderRadius: 100,
                backgroundColor: Colors.PRIMARY_TWO,
            },
            style: {
                alignSelf: "center",
                width: '50%',
                borderRadius: 100,
                borderColor: "blue",
                backgroundColor: "white",
                elevation: 5, // shadow on Android
                shadowOpacity: .10, // shadow on iOS,
                shadowRadius: 4, // shadow blur on iOS
            },
            tabStyle: {
                borderRadius: 100,
            },
        }}
        swipeEnabled={true}>
     <ProfileTabNavigator.Screen name="Info" component={ProfileInfoScreen} />
     <ProfileTabNavigator.Screen name="Photos" component={ProfilePhotosScreen} />
   </ProfileTabNavigator.Navigator>
  );
 };
  

Используете ли вы createMaterialTopTabNavigator? Если нет, то проверьте https://reactnavigation.org/docs/material-top-tab-navigator /

Это выглядит так:

 const TopTabs = createMaterialTopTabNavigator();

function TopTab( ) {
  return (
    <TopTabs.Navigator
      {/* Custom top tab bar */}
      tabBar={(props) => <CustomTabBar {...props} />}
    >
      <TopTabs.Screen
        name={"Screen1"}
        component={ScreenOne}
        options={{ tabBarLabel: "Screen 1"}}
      />
      <TopTabs.Screen
        name={"Screen2"}
        component={ScreenTwo}
        options={{ tabBarLabel: "Screen 2"}}
      />
    </TopTabs.Navigator>
  );
}
  

Важно помнить, что, по сути, TopTabs в примере — это просто компонент. Таким образом, вы можете использовать его так же, как и другие компоненты:

   <View style={styles.someStyle}>
    <View style={{width: 150}}>
      <TopTab />
    </View>
  </View>