Как я могу прикоснуться к средней кнопке переполнения в нижней части навигации? - PullRequest
Новая
       27

Как я могу прикоснуться к средней кнопке переполнения в нижней части навигации?

0 голосов
/ 28 апреля 2020

Я хочу сделать TabNavigation, используя реагирующую навигацию. как эта картинка.

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

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

это мое приложение. js Код. И я сделал AddButton Component. 

const AppContainer = createStackNavigator(
  {
    default: createBottomTabNavigator(
      {
        Home: {
          screen: HomeScreen,
          navigationOptions: {
            tabBarIcon: ({ tintColor }) => <AntDesign name="home" size={35} color={tintColor} />
          }
        },
        Post: {
          screen: () => null,
          navigationOptions: {
            tabBarIcon: ({ tintColor }) => (
              <TouchableOpacity size={150}
              activeOpacity={1}
              style={{
                width:75,
                height:75,
                justifyContent: 'center',
                alignItems: 'center',
                height:80,
                marginBottom:80
              }} 
              >
                <AddButton/>
              </TouchableOpacity>
            ),
          },
        },
        Profile: {
          screen: ProfileScreen,
          navigationOptions: {
            tabBarIcon: ({ tintColor }) => <MaterialIcons name="person-outline" size={35} color={tintColor} />
          }
        }
      },
      {
        defaultNavigationOptions: {
          tabBarOnPress: ({ navigation, defaultHandler }) => {
            if (navigation.state.key === 'Post') {
              navigation.navigate('postModal')
            } else {
              defaultHandler()
            }
          }
        },
        tabBarOptions: {
          activeTintColor: '#5A2AB7',
          inactiveTintColor: '#404040',
          showLabel: false,
          style: { height: 80 },
        }
      }
    ),
    postModal: {
      screen: PostScreen
    }
  },
  {
    mode: 'modal',
    headerMode: 'none',
  }
)

const AuthStack = createStackNavigator({
  Login: LoginScreen,
  Register: RegisterScreen
})

export default createAppContainer(
  createSwitchNavigator(
    {
      Loading: LoadingScreen,
      App: AppContainer,
      Auth: AuthStack
    },
    {
      initialRouteName: "Loading"
    }
  )
);

вот AddButton. js

import React from 'react'
import {View, StyleSheet, Text, TouchableHighlight, Animated} from 'react-native'
import {FontAwesome5} from '@expo/vector-icons'

export default class AddButton extends React.Component {
  render() {
    return (
        <View style={styles.button} underlayColor='#875EC1'>
          <FontAwesome5 name="plus" size= {24} color="#FFF" />
        </View>
    )
  }
}
const styles = StyleSheet.create({
  button:{
    backgroundColor:'#875EC1',
    alignItems:'center',
    justifyContent:'center',
    width:72,
    height:72,
    borderRadius:36,
    shadowColor:'#875EC1',
    shadowRadius:5,
    shadowOffset: {height:10},
    shadowOpacity:0.3,
    elevation:3
  }
})
...