React-navigation，道具驗證中缺少tintColor

Question

我已將我的react-navigation代碼放入單獨的Routes文件中，然後將其導入到我的App.js文件中。一切工作正常，但我正在使用的Atom /核素的Airbnb ESLint配置和獲取與tintColor錯誤...

「tintColor在道具驗證缺失」嘗試這樣：

路線.propTypes = {tintColor：PropTypes.string.isRequired，}

但後來得到錯誤 「tintColor PropType定義，但道具從未使用過」

這是代碼的一部分

const Routes =() = { 
const ContentNavigator = TabNavigator(
{ 
    Profile: { screen: ProfileStack }, 
    History: { screen: HistoryStack }, 
    Questions: { 
    screen: QuestionsStack, 
    navigationOptions: { 
     tabBarIcon: ({ tintColor }) => (
     <Icon name="question-circle" type="font-awesome" size={20} color= 
{tintColor} /> 
    ), 
    }, 
    }, 
    Notifications: { screen: NotificationsStack }, 
}, 
{ 
    initialRouteName: 'Profile', 
    swipeEnabled: true, 
    tabBarOptions: { 
    activeTintColor: COLOR_PRIMARY, 
    }, 
    backBehavior: 'none', 
}); 

Answer 1

你可以創建一個額外的Functional Component，添加PropTypes因爲它和你的主要成分使用。例如：

... 
import PropTypes from 'prop-types'; 
... 

const QuestionsTabBarIcon = ({ tintColor }) => (
    <Icon name="question-circle" type="font-awesome" size={20} color={tintColor} /> 
); 
QuestionsTabBarIcon.propTypes = { 
    tintColor: PropTypes.string.isRequired, 
}; 

... 

const ContentNavigator = TabNavigator(
    { 
    Profile: { screen: ProfileStack }, 
    History: { screen: HistoryStack }, 
    Questions: { 
     screen: QuestionsStack, 
     navigationOptions: { 
     tabBarIcon: QuestionsTabBarIcon 
     }, 
    }, 
    Notifications: { screen: NotificationsStack }, 
    }, 
    { 
    initialRouteName: 'Profile', 
    swipeEnabled: true, 
    tabBarOptions: { 
     activeTintColor: COLOR_PRIMARY, 
    }, 
    backBehavior: 'none', 
    } 
); 

...