Question

我正在使用CRNA工具在react native v0.55中构建一个登录屏幕，我希望背景从上到下完全使用渐变。我尝试过，但是通过这种方式，我无法正确创建登录屏幕。以下是我的代码，请帮助我。这也是链接*-> * 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

我已经通过

实现了

从'react-native-linear-gradient'导入LinearGradient

import {容器，标题，标题，内容，按钮，图标，左，正文，   右}来自“本地基础”

<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创建全屏渐变背景？

3 个答案: