如何使用天然底座将线性梯度应用于标题.(反应天然)

我开始练习react天然，我对React的线性梯度，如何将线性梯度颜色应用于本地碱基的标头。

。

我创建了样本线性梯度

<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>

是expo的LinearGradient吗？在这种情况下只需将LinearGradient组件包裹在标题组件上即可。

例如，

<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>

相关内容

最新更新

热门标签：