TabBar图标不显示,选项不能反应原生

时间:2017-10-12 19:19:06

标签: javascript reactjs react-native expo

我遇到TabBar react-navigation

的问题

| react-navigation 1.0.0-beta.13 |

| react-native 0.48.4|

| node v6.11.4 |

| npm 3.10.10 |

import React from 'react';
import {
    Text,
    Platform
} from 'react-native';
import { Constants } from "expo"

import {
    TabNavigator
} from 'react-navigation';

import { Ionicons } from '@expo/vector-icons';

const MyHomeScreen = ({ navigation }) => (
    <Text>HOME</Text>
);

const MyNotificationScreen = ({ navigation }) => (
    <Text>NOTIFICATION</Text>
);

MyHomeScreen.navigationOptions = {
    tabBarLabel: 'Home',
    tabBarIcon: ({ tintColor, focused }) => (
        <Ionicons
            name={'md-checkmark-circle'}
            size={26}
            style={{ color: tintColor }}
        />
    ),
    showIcon: true,
    showLabel: false
};

MyNotificationScreen.navigationOptions = {
    tabBarLabel: 'People',
    tabBarIcon: ({ tintColor, focused }) => (
        <Ionicons
            name={'md-checkmark-circle'}
            size={26}
            style={{ color: tintColor }}
        />
    ),
    showIcon: true,
    showLabel: false
};

const App = TabNavigator(
    {
        Home: {
            screen: MyHomeScreen,
        },
        Notifications: {
            screen: MyNotificationScreen,
        },
    },
    {
        tabBarOptions: {
            activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',
        },
    }
);



export default () => <App />

Live preview

问题是图标没有显示且标签可见,但我将showLabel设置为false

1 个答案:

答案 0 :(得分:0)

showIcon&amp; showLabel是TabNavigator本身的选项(在tabBarOptions下),而不是屏幕navigationOptions。