[英]How to give gradient color to topBar wix's react-native-navigation V2
I am using Wix's react-native-navigation V2. 我正在使用Wix的react-native-navigation V2。 I want to give gradient color to the topBar. 我想给topBar渐变色。 I have installed react-native-linear-gradient successfully. 我已经成功安装了react-native-linear-gradient。 But I am not getting how to give gradient color to topBar. 但是我不知道如何给topBar赋予渐变颜色。
Following is the code of pushing the screen into the stack. 以下是将屏幕推入堆栈的代码。
Navigation.push('mainStack', {
component: {
name: 'SignIn',
options: {
topBar: {
visible: true,
animate: false,
//hideOnScroll: true,
//buttonColor: 'white',
drawBehind: false,
title: {
text: 'Sign In',
fontSize: 18,
//color: 'white',
fontFamily: 'Ubuntu',
alignment: 'center'
},
backButton: {
// icon: require('icon.png'),
id: 'backButton',
visible: true,
//color: 'white'
},
background: {
color: '#1abc9c'
}
},
sideMenu: {
left: {
enabled: false
}
},
animations: {
push: { // It works! Push with animation from right to left
content: {
x: {
from: 1000,
to: 0,
duration: 100,
},
alpha: {
from: 1,
to: 1,
duration: 100,
}
}
},
pop: { // It works! Pop with animation from left to right
content: {
x: {
from: 0,
to: 1000,
duration: 50,
},
alpha: {
from: 1,
to: 1,
duration: 50,
}
}
}
}
}
}
});
I tried to give a gradient color in options like below 我试图在下面的选项中提供渐变颜色
background: {
color: <LinearGradient colors={['#a8ff78', '#78ffd6']} style={styles.container} />
}
But it is not working. 但这是行不通的。
I'm not sure that works, I've always used that library wrapping the component that I want to have the gradient color, like below 我不确定是否可以正常工作,我总是使用该库包装要具有渐变颜色的组件,如下所示
<LinearGradient
colors={["#34495E", "#2e4154", "#485b6e"]}
start={{x: 0.0, y: 0}}
end={{x: 0.60, y: 0}}
>
<View>
{...}
</View>
</LinearGradient>
Render <LinearGradient colors={['#a8ff78', '#78ffd6']} style={styles.container} />
in a React Component and register it using Navigation.registerComponent()
and then use it as follows 在React组件中渲染<LinearGradient colors={['#a8ff78', '#78ffd6']} style={styles.container} />
并使用Navigation.registerComponent()
注册,然后按如下方式使用
topBar: {
background: {
component: {
name: "" // The name of the registered component
}
}
}
The only problem is that the component will not render in the unsafe area. 唯一的问题是该组件不会在不安全区域中渲染。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.