Question

大家好，谁能告诉我如何在不使用线性渐变的情况下在本地反应中使用渐变，因为我无法使用它在本地底部标签栏和本地元素卡上进行反应。

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）背景更改为渐变背景

Answer 1

底部标签栏

您可以使用自定义分量而不是tabBarComponent并在其中应用线性渐变。

反应本机元素卡

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

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

Answer 2

您可以尝试使用此代码。可能有助于解决您的问题。您可以将自定义标签添加到bottomTabNavigator。

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

这是我的自定义标签用户界面

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}

定义基础选项卡的状态，并在CustomTab组件上根据此状态定义视图。

请检查这些链接以获取更多了解

https://dev.to/hrastnik/lets-create-a-custom-animated-tab-bar-with-react-native-3496

https://hackernoon.com/how-to-use-a-custom-header-and-custom-bottom-tab-bar-for-react-native-with-react-navigation-969a5d3cabb1

如何在React Native中使用渐变

2 个答案: