Пользовательская панель вкладок React Navigation 5 - PullRequest
Новая
       12

Пользовательская панель вкладок React Navigation 5

1 голос
/ 28 мая 2020

Я пытаюсь создать панель вкладок, как на картинке ниже, с помощью React Navigation.

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

Кто-нибудь может мне помочь?!

enter image description here

Ответы [ 2 ]

4 голосов
/ 28 мая 2020

вот демонстрация: https://snack.expo.io/@nomi9995 / createbottomtabnavigator-% 7 C -react-navigation

вы можете использовать tabBar props для создания пользовательских TABBAR 

<NavigationContainer>
      <Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>

Компонент MyTabBar 

function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View style={{ flexDirection: 'row',backgroundColor:"#F4AF5F",height:50,borderRadius:50,justifyContent:"center",alignItems:"center" }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityStates={isFocused ? ['selected'] : []}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1 }}
          >
            <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}
0 голосов
/ 05 августа 2020

Ключ к этому - добавить стиль position: 'absolute' во внешний <View> контейнер на вашей настраиваемой панели вкладок. Это избавит от проблемы с белым фоном.

...