反应本机,抽屉导航图标被剪切

时间:2020-02-03 21:52:56

标签: react-native navigation-drawer

到目前为止,我还处于学习阶段,希望有人能对我有所帮助。

我正在与react native一起工作,我试图将图标添加到抽屉导航中,但是其中一个图标/纸面被剪掉了

enter image description here 有人可以告诉我如何使图标周围的空间更大吗??

import {createDrawerNavigator, createStackNavigator} from 'react-navigation';
import Header from '../components/Header';
import AppNavigator from './AppNavigator';
import Notifications from '../screens/Notifications';
import SendNotifications from '../screens/SendNotifications';
import Icon from 'react-native-vector-icons/FontAwesome';
const headerNavigationOptions = {
    header: props => <Header {...props} />
};
const routes = {
    Home: {
        screen: AppNavigator,
        navigationOptions: {
            title: 'Home',
            drawerIcon: ({ tintColor }) => (
                <Icon name="home" size={25} color={tintColor}  /> )
        }
    },
    Notifications: {
        screen: createStackNavigator({
            Notifications: {
                screen: Notifications,
                navigationOptions: headerNavigationOptions
            }
        }),
        navigationOptions: {
            title: 'Notifications',
            drawerIcon: ({ tintColor }) => (
                <Icon name="bell" size={25} color={tintColor}  /> )
        }
    },
    SendNotifications: {
        screen: createStackNavigator({
            SendNotifications: {
                screen: SendNotifications,
                navigationOptions: headerNavigationOptions
            }
        }),
        navigationOptions: {
            title: 'Send Notifications',
            drawerIcon: ({ tintColor }) => (
                <Icon name="paper-plane" size={25} color={tintColor}  /> )
        }
    }
};
const routeConfig = {
    initialRouteName: 'Home',
    drawerBackgroundColor : '#013a65',
    contentOptions: {
        activeTintColor: '#ffffff',
        activeBackgroundColor : 'transparent',
        inactiveTintColor : '#ffffff',
        },
        iconStyle: {
            width: 100,
            height: 100,
        },
};
export default createDrawerNavigator({
    ...routes
}, routeConfig);``` 

1 个答案:

答案 0 :(得分:0)

您尝试过在 routeConfig> contentOptions> iconStyle 中增加宽度和高度,还是在 <Icon name="paper-plane" size={25} color={tintColor} />吗?