TabBar的漸變背景？

Question

我正在嘗試使TabNavigator的背景爲漸變。 https://facebook.github.io/react-native/docs/colors.html的文檔指示顏色屬性通常與CSS在網絡上的工作方式相匹配。我去了https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient並閱讀因爲s屬於數據類型，所以它們只能用於可以使用s的地方。因此，線性漸變（）不適用於使用數據類型的背景顏色和其他屬性。

因此，以下不會工作：

import { TabNavigator, TabBarBottom } from 'react-navigation'; 

export default TabNavigator(
    { 
    Home: { 
     screen: HomeScreen, 
    }, 
    . . . 
    }, 
    { 
    navigationOptions: ({ navigation }) => ({ 
     tabBarIcon: .... 
    tabBarComponent: TabBarBottom, 
    tabBarPosition: 'bottom', 
    animationEnabled: false, 
    swipeEnabled: false, 
    tabBarOptions: { 
     activeTintColor: 'rgb(111, 111, 111)', 
     labelStyle: { 
     fontSize: 12, 
     }, 
     style: { 
     backgroundColor: 'linear-gradient(45deg, blue, red)', 
     }, 
    } 
    } 
); 

這是從文檔清晰。什麼不清楚是什麼工作。

Answer 1

您可以用您自己的組件替換tabBarComponent，並在那裏使用react-native-linear-gradient。