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を使うことができるところでしか使用できません。このため、背景色やデータ型を使用するその他のプロパティではlinear-gradient（）は機能しません。

その結果、以下のうではない作品：

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を使用できます。