Блог

Главная - Вопросы по программированию - Как применить линейный градиент к заголовку, используя собственную базу. (React Native)

Как применить линейный градиент к заголовку, используя собственную базу. (React Native)

#react-native

#react-native

Вопрос:

Я начинаю практиковать react native, у меня есть вопрос относительно линейного градиента 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>

Ответ №1:

Это LinearGradient из expo? В этом случае просто оберните свой 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';

И последнее, но самое важное, установите некоторое flex значение для вашего LinearGradient ,

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