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

我不确定是否可以正常工作，我一直都在使用该库包装要具有渐变颜色的组件，如下所示

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

Answer 2

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

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

唯一的问题是该组件不会在不安全的区域中呈现。

如何为topBar wix的react-native-navigation V2提供渐变颜色

2 个答案: