如何使用原生基础将线性渐变应用到 Header。（反应原生）答案

【问题标题】：How to apply the linear gradient to the Header, using the native base. (React Native)如何使用原生基础将线性渐变应用到 Header。（反应原生）
【发布时间】：2019-03-10 17:15:08
【问题描述】：

我开始练习 react native，我对 react 的线性渐变有疑问，如何将线性渐变颜色应用于 native base 的标题。

我已经创建了示例线性渐变

<LinearGradient colors={['#00e4d0', '#5983e8']} style={styles.linearGradient}>
          <Text style={styles.buttonText}>
            Sign in with Facebook
          </Text>
        </LinearGradient>

标题如何设置线性渐变色？

<View style={styles.container}>

        <Header style={{backgroundColor:'#00e4d0'}}>

          <Left style={styles.headerLeft}>
            <Icon name="menu" onPress={() => this.props.navigation.openDrawer()} style={{color:'white'}}></Icon>
          </Left>

          <Body>
            <Text style={{color:'white', fontSize: 25}}>Hiflyer</Text>
          </Body>

        </Header>

        <View style={{flex: 1, alignItems: 'center', justifyContent:'center'}}>

          <Text>Home</Text>

        </View>

        <LinearGradient colors={['#00e4d0', '#5983e8']} style={styles.linearGradient}>
          <Text style={styles.buttonText}>
            Sign in with Facebook
          </Text>
        </LinearGradient>

    </View>

【问题讨论】：

标签： react-native

【解决方案1】：

LinearGradient 来自世博会吗？在这种情况下只需将 LinearGradient 组件包裹在 Header 组件周围即可。

例如，

<LinearGradient colors={['#00e4d0', '#5983e8']} style={styles.linearGradient}>
       <Header style={{backgroundColor:'#00e4d0'}}>

          <Left style={styles.headerLeft}>
            <Icon name="menu" onPress={() => this.props.navigation.openDrawer()} style={{color:'white'}}></Icon>
          </Left>

          <Body>
            <Text style={{color:'white', fontSize: 25}}>Hiflyer</Text>
          </Body>

        </Header>

</LinearGradient>

或者，如果这不起作用，您可能想使用react-native-linear-gradient

import LinearGradient from 'react-native-linear-gradient';

最后但最重要的事情是为您的LinearGradient 设置一些flex 值，

<LinearGradient 
     colors={['#6e45e2', '#88d3ce']}
     style = { styles.container }
>
   <Header style={{backgroundColor:'#00e4d0'}}>

      <Left style={styles.headerLeft}>
        <Icon name="menu" onPress={() => this.props.navigation.openDrawer()} style={{color:'white'}}></Icon>
      </Left>

      <Body>
        <Text style={{color:'white', fontSize: 25}}>Hiflyer</Text>
      </Body>

   </Header>

</LinearGradient>

【讨论】：