навигация не удалась в верхней части плавающей закладки - PullRequest
0 голосов
/ 14 февраля 2020

Я хочу задать вопрос о плавающем tabBarIcon

. Пример кода такой же, как описанный в этом примере. Реактивная навигационная вкладка, крупный значок посередине

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

это из моей версии плавающего TabBarIcon

//... other code
const UpdateStack = createStackNavigator(
    {
        Update: UpdateScreen
    },
    {
        mode: 'modal',
        headerMode: 'none'
    }
);
UpdateStack.navigationOptions = {
tabBarIcon: ({ tintColor }) => (
        <TouchableOpacity
            style={{
                height: 60,
                width: 60,
                backgroundColor: '#ffff',
                borderRadius: 30,
                top: -13,
                justifyContent: 'center',
                alignItems: 'center',
                elevation: 10
            }}>
            <Ionicons
                name='ios-add-circle'
                size={60}
                style={{
                    color: tintColor
                }}
            />
        </TouchableOpacity>
    ),
    tabBarLabel: 'Update'
};

//... other code

const mainTabNavigator = createBottomTabNavigator(
    {
        HomeStack,
        MemberStack,
        UpdateStack,
        NotifStack,
        ProjectsStack
    },
    {
        initialRouteName: 'UpdateStack',
        tabBarOptions: {
            style: {
                borderTopWidth: 0,
                borderTopColor: '#1A3665',
                backgroundColor: '#ffffff',
                height: 60,
                borderTopRightRadius: 20,
                borderTopLeftRadius: 20,
                position: 'absolute',
                bottom: 0,
                left: 0,
                right: 0,
                elevation: 10
            },
            activeTintColor: '#006be6',
            inactiveTintColor: '#262b73'
        },
        backBehavior: 'history'
    }
);


//... other code
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...