React native 如何在react native中使用渐变

嘿，伙计们，有谁能告诉我如何在不使用线性渐变的情况下在react native中使用渐变，因为我无法使用react native底部选项卡栏和react native元素卡

const MainScreen = createBottomTabNavigator(
      {
        Home : {
          screen : HomeStack,
          navigationOptions: {
            tabBarLabel:"MY MOVIES",
            tabBarIcon: ({focused}) => (
              <Ionicons
                  name={focused ? 'ios-home' : 'md-home'}
                  size={35}
                  style={{ color: focused ? '#33A3F4' : '#949494'}}
              />
          ),
          }
        },
        AddMovie : {screen : AddMovie,
          navigationOptions: {
            tabBarLabel:"ADD MOVIE",
            tabBarIcon: ({focused}) => (
              <Ionicons
                  name={"md-add-circle"}
                  size={focused?35:30}
                  style={{ color: focused ? '#33A3F4' : '#949494'}}
              />

           ), 
          }
        },
      },
      {
        tabBarOptions: {
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
          style: {
            backgroundColor:  '#f1f7ed', //want this thing to be gradient
            height:50,
          },
        },
        lazy: true,
        swipeEnabled: true,
        animationEnabled: true,
      }
      );

const MainScreen=createBottomTabNavigator(
{
主页：{
屏幕：HomeStack，
导航选项：{
tabBarLabel：“我的电影”，
tabBarIcon:（{focused}）=>(
),
}
},
AddMovie:{屏幕：AddMovie，
导航选项：{
tabBarLabel：“添加电影”，
tabBarIcon:（{focused}）=>(
), 
}
},
},
{
选项卡选项：{
activeTintColor:‘番茄’，
颜色：“灰色”，
风格：{
背景色：“#f1f7ed”//希望这个东西是渐变的
身高：50，
},
},
懒惰：是的，
是的，
animationEnabled：没错，
}
);

---

要将主屏幕（底部选项卡栏）背景更改为渐变背景

底部选项卡栏

您可以使用自定义组件而不是

tabBarComponent

，并在那里应用线性渐变

反应本机元素卡

我将尝试将填充设置为0，并将LinearGradient添加为子元素

<Card containerStyle={{padding: 0}}>
  <LinearGradient
    colors={['#4c669f', '#3b5998', '#192f6a']}
  >
    ...
  </LinearGradient>
</Card>

...

您可以尝试此代码。您可以将自定义选项卡添加到bottomTabNavigator中，这可能有助于解决您的问题

 const Tabs = createBottomTabNavigator(
  {
    Home: {
      screen: HomeStack
    },
    Events: {
      screen: EventStack
    },
    Templates: {
      screen: TemplateStack
    }
  },
  {
    initialRouteName: "Home",
    tabBarOptions: {
      activeTintColor: theme.palette.primaryColor
    },
    tabBarComponent: CustomTab,
    tabBarPosition: "bottom"
  }
);

这是我的自定义选项卡UI

import React, {PureComponent} from 'react'
import {View, TouchableWithoutFeedback, Text, StyleSheet} from 'react-native'
import I18N from "react-native-i18n";
import * as Animatable from 'react-native-animatable';
import theme from '../theme'
import {Icon} from './Icon'

class CustomTab extends PureComponent {

  constructor(){
    super()
    this.state = {
      routeNameSelected:'Home'
    }
  }

  getIconName(routeName){
    switch (routeName) {
      case 'First':
        return 'information-outline'
      case 'Second':
        return 'play-box-outline'
      case 'Third':
        return 'comment-text-outline'

    }
  }

  onPressTab(routeName){
    this.props.jumpTo(routeName)
    this.setState({
      routeNameSelected:routeName
    })
  }

  render() {
    const {navigation} = this.props;
    const {routes} = navigation.state;
    return (
        <View style={styles.tabbar}>

        {/*here you can use Linear gradient*/}
          {routes && routes.map((route, index) => {
            return (
              <TouchableWithoutFeedback
                key={route.key}
                style={styles.tab}
                onPress={() => this.onPressTab(route.routeName)}
              >

                <View style={{minHeight:50, justifyContent:'center'}}>
                  {navigation.state.index===index &&
                  <Animatable.View animation="rubberBand" duration={1000} style={styles.tab}>
                    <Icon size={24} name={this.getIconName(route.routeName)} style={{ color: theme.palette.primaryColor }} />
                    <Text style={[styles.tabText,{color: theme.palette.primaryColor}]}>{I18N.t('tabs.'+route.routeName)}</Text>
                  </Animatable.View>
                  }
                  {navigation.state.index!==index &&
                  <View style={styles.tab}>
                    <Icon size={24} name={this.getIconName(route.routeName)} style={{ color: theme.palette.colors.titleColor }} />
                    <Text style={[styles.tabText,{color: theme.palette.colors.titleColor}]}>{I18N.t('tabs.'+route.routeName)}</Text>
                  </View>
                  }
                </View>
              </TouchableWithoutFeedback>
            );
          })}

        </View>
    )
  }
}

export {CustomTab}

import React，{PureComponent}来自“React”
从“react native”导入{View，TouchableWithoutFeedback，Text，StyleSheet}
从“react-native-I18N”导入I18N；
从“react native Animatable”导入*作为可设置动画；
从“../theme”导入主题
从“./Icon”导入{Icon}
类CustomTab扩展了PureComponent{
构造函数（）{
超级（）
此.state={
routeNameSelected:“主页”
}
}
getIconName（路由名称）{
交换机（路由名称）{
第一个案例：
返回“信息大纲”
第二个案例：
返回“播放框大纲”
第三个案例：
返回“注释文本大纲”
}
}
onPressTab（路由名称）{
此.props.jumpTo（routeName）
这是我的国家({
routeName已选定：routeName
})
}
render（）{
const{navigation}=this.props；
const{routes}=navigation.state；
返回(
{/*这里可以使用线性梯度*/}
{routes&&routes.map（（路由，索引）=>{
返回(
this.onPressTab（route.routeName）}
>
{navigation.state.index==index&&

您正在使用expo创建项目？？？是的，默认情况下我使用expoExpo提供的线性渐变。您可以检查此项。如果它有效，则我会将其作为答案发布。它会有效，但我不想使用线性渐变，因为它仅在组件渲染中有效。我想对我的底部选项卡导航（反应导航）进行渐变。我添加了答案，请检查是否有任何方法可以像css一样在样式元素中使用渐变。不幸的是，目前还不可能。然后我如何将选项卡栏颜色更改为渐变请阅读本教程：。它显示了如何创建自定义选项卡栏。然后，您以与示例中相同的方式渲染它元素卡。