时间戳

首页 > 解决方案 > 如何在本机反应中使用渐变

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,
      }
      );

想要将 MainScreen(BottontabBar) 背景更改为渐变背景

标签： react-nativeexpo

解决方案

底部标签栏

您可以使用自定义组件代替tabBarComponent并在那里应用线性渐变。

反应原生元素卡

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

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

推荐阅读