android - 如何为 topBar wix 的 react-native-navigation V2 赋予渐变色

Question

我正在使用 Wix 的 react-native-navigation V2。我想给 topBar 渐变颜色。我已经成功安装了 react-native-linear-gradient。但我不知道如何为 topBar 提供渐变颜色。

以下是将屏幕压入堆栈的代码。

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,
                }
              }
            }
          }
        }
      }
    });

我试图在下面的选项中提供渐变颜色

background: {
              color: <LinearGradient colors={['#a8ff78', '#78ffd6']} style={styles.container} />
            } 

但它不起作用。

Answer 1

在 React 组件中渲染<LinearGradient colors={['#a8ff78', '#78ffd6']} style={styles.container} />并注册它Navigation.registerComponent()，然后按如下方式使用它

topBar: {
  background: {
    component: {
      name: "" // The name of the registered component
    }
  }
}

唯一的问题是组件不会在不安全区域渲染。

Answer 2

我不确定这是否有效，我一直使用该库来包装我想要具有渐变颜色的组件，如下所示

<LinearGradient
      colors={["#34495E", "#2e4154", "#485b6e"]}
      start={{x: 0.0, y: 0}}
      end={{x: 0.60, y: 0}}
>
  <View>
    {...}
  </View>
</LinearGradient>