Реагировать на собственный стиль нижней панели вкладок, добавляющий удар

Кто-нибудь знает, как стилизовать нижнюю панель вкладок, чтобы было что-то подобное?

Нижняя панель вкладок

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

Мой файл навигации выглядит так:

const TabNavigator = createMaterialBottomTabNavigator(
{
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarIcon: ({tintColor}) => (tintColor === Color.primary ?
                    <Image source={home_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
                    :
                    <Image source={home_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
            ),
        }
    },
    Cart2: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarIcon: ({tintColor}) => (tintColor === Color.primary ?
                    <Image source={ranking_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
                    :
                    <Image source={ranking_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
            ),
        }
    },
    Cart3: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarIcon: ({tintColor}) => (tintColor === Color.primary ?
                    <Image source={photo_icon} resizeMode="contain"
                           style={{
                               width: 25,
                               height: 25,
                               position: 'absolute',
                               top: -10,
                               tintColor: tintColor,
                               marginBottom: 20
                           }}/>
                    :
                    <Image source={photo_icon} resizeMode="contain"
                           style={{width: 25, height: 25, tintColor: tintColor}}/>
            ),
        }
    },
    Cart4: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarIcon: ({tintColor}) => (tintColor === Color.primary ?
                    <Image source={gallery_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
                    :
                    <Image source={gallery_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
            ),
        }
    },
    Cart5: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarIcon: ({tintColor}) => (tintColor === Color.primary ?
                    <Image source={mission_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
                    :
                    <Image source={mission_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
            ),
        }
    },
},
{
    initialRouteName: "Home",
    activeColor: Color.primary,
    barStyle: {
        backgroundColor: Color.white,
        borderTopLeftRadius: 30,
        borderTopRightRadius: 30,
        borderBottomStartRadius: 30,
        borderBottomEndRadius: 30,
        overflow: 'hidden'
    },
},
);
export default createAppContainer(TabNavigator)

Я использую эту библиотеку material-bottom-tabs с Expo


react-native css styles bottombar
person Manu13k    schedule 25.12.2019    source источник
comment
проверьте это, возможно, поможет   -  person Oliver D    schedule 25.12.2019
comment
Это полезно, но не совсем то, что мне нужно, спасибо   -  person Manu13k    schedule 26.12.2019

Ответы (1)


arrow_upward
1
arrow_downward

Проблема решена благодаря моему коллеге. Вам нужно использовать createBottomTabNavigator вместо createMaterialBottomTabNavigator, потому что вкладка «Нижний материал» не поддерживает переполнение, поэтому вы не можете добавить круг в качестве элемента, который выходит за пределы.

Теперь мой предмет выглядит так:

Photo: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarLabel: ' ',
            tabBarIcon: ({tintColor}) => (tintColor === Color.primary ?
                    <TouchableOpacity
                        activeOpacity={1}
                        style={{
                            borderRadius: Math.round((150 * 0.5) + (150 * 0.5)) / 2,
                            width: 150 * 0.5,
                            height: 150 * 0.5,
                            backgroundColor: '#fff',

                            justifyContent: 'center',
                            alignItems: 'center'
                        }}
                        underlayColor='#ccc'
                    >

                        <Image source={photo_icon} resizeMode="contain"
                               style={{
                                   width: 30,
                                   height: 30,
                                   tintColor: tintColor,
                               }}/>
                    </TouchableOpacity>
                    :
                    <TouchableOpacity
                        activeOpacity={1}
                        style={{
                            borderRadius: Math.round((150 * 0.5) + (150 * 0.5)) / 2,
                            width: 150 * 0.5,
                            height: 150 * 0.5,
                            backgroundColor: '#fff',
                            justifyContent: 'center',
                            alignItems: 'center',
                        }}
                        underlayColor='#ccc'
                    >

                        <Image source={photo_icon} resizeMode="contain"
                               style={{
                                   width: 30,
                                   height: 30,
                                   tintColor: tintColor,
                               }}/>
                    </TouchableOpacity>
            ),
        }
    },

А теперь удалите barStyle, чтобы использовать tabBarOptions следующим образом:

tabBarOptions: {
        activeTintColor: Color.primary,
        style: {
            borderTopWidth: 0,
            width: '100%',
            borderRadius: 30,
            backgroundColor: '#fff',
        },
    }

И тогда у вас будет точный рендер, который я хотел на предыдущем экране, спасибо

person Manu13k    schedule 29.12.2019