React Native：如何在 expo 中使用 LinearGradient 创建全屏渐变背景？

Question

我正在使用 CRNA 工具在 react native v0.55 中构建登录屏幕，我希望在背景中从上到下完全使用渐变。我试过了，但通过这种方式，我无法正确创建登录屏幕。下面是我的代码，请帮助我。这里也是 link*->* https://snack.expo.io/r1aqB9gwQ

    import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
import { LinearGradient } from 'expo';

// You can import from local files

// or any pure javascript modules available in npm
import { Card } from 'react-native-elements'; // Version can be specified in package.json

export default class App extends React.Component {
  render() {
    return (
      <LinearGradient
      colors={["blue", "red"]}
      style={{
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        height: 570,
      }} >
      <Text style={{
      justifyContent: 'center',
      textAlign: 'center',
      fontSize: 20,
      fontWeight: 'bold',
      }}>Hi World</Text>
      </LinearGradient>

    );
  }
}

Answer 1

将 height: 570 更改为 top: 0。不同设备的高度可能不同。

Answer 2

style={{flex:1}}

或您的主容器样式

Answer 3

我已经达到

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

import { Container, Header, Title, Content, Button, Icon, Left, Body, Right } from 'native-base'

<Container>
                <LinearGradient
                    colors={['#2695d9', '#2f61ad']}
                    style={{ flex: 1 }}
                    //  Linear Gradient 
                    start={{ x: 0, y: 0 }}
                    end={{ x: 0, y: 1 }}
                >
                    <Header transparent>
                        <Left>
                            <Button transparent>
                                <Icon name="arrow-back" />
                            </Button>
                        </Left>
                        <Body>
                            <Title>Transparent</Title>
                        </Body>
                        <Right>
                            <Button transparent>
                                <Text>Cancel</Text>
                            </Button>
                        </Right>
                    </Header>
                    <Content>
                        <Text> Header with transparent prop </Text>
                    </Content>
                </LinearGradient>

            </Container>

React Native：如何在 expo 中使用 LinearGradient 创建全屏渐变背景？

React Native: How do I create full screen gradient background with LinearGradient in expo?

javascript

reactjs

react-native

expo