Javascript React Native：如何在世博会中使用LinearGradient创建全屏渐变背景？_Javascript_Reactjs_React Native_Expo

Javascript React Native：如何在世博会中使用LinearGradient创建全屏渐变背景？

javascript reactjs react-native

Javascript React Native：如何在世博会中使用LinearGradient创建全屏渐变背景？,javascript,reactjs,react-native,expo,Javascript,Reactjs,React Native,Expo,我正在使用CRNA工具在react native v0.55中构建一个登录屏幕，我希望在后台完全从上到下使用渐变。我试过了，但用这种方法，我无法正确创建登录屏幕。下面是我的代码，请帮助我。这里还有链接*->* import*as React from'React'；从“react native”导入{Text，View，StyleSheet}；从“expo”导入{Constants}；从“expo”导入{LinearGradient}； //可以从本地文件导入 //或npm中可用的任何纯j

我正在使用CRNA工具在react native v0.55中构建一个登录屏幕，我希望在后台完全从上到下使用渐变。我试过了，但用这种方法，我无法正确创建登录屏幕。下面是我的代码，请帮助我。这里还有链接*->*

import*as React from'React'；
从“react native”导入{Text，View，StyleSheet}；
从“expo”导入{Constants}；
从“expo”导入{LinearGradient}；
//可以从本地文件导入
//或npm中可用的任何纯javascript模块
从“react native elements”导入{Card}；//可以在package.json中指定版本
导出默认类App扩展React.Component{
render（）{
返回(
嗨，世界
);
}
}

将

高度：570

更改为

顶部：0

。不同设备的高度可能不同

style={{flex:1}}

或者您的主容器样式

我通过

从“反应本机线性渐变”导入LinearGradient

导入{容器、标题、标题、内容、按钮、图标、左侧、正文、，右}来自“本机基”


透明的
取消
带透明道具的收割台

不工作！！当我把它改为top:0时，它在底部只显示了一点渐变。请参阅@user9824674上的示例，它的

top

，而不是

top

，感谢您指出它是有效的。还通过使用flex:1和position:relative找到了另一种方法是的，这是理想的方法。您不需要设置位置：“相对”。默认情况下，它的相对值I see，但justifyContent:'center'，textAlign:'center'，在文本中不起作用

style={{flex:1}}

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