Как придать цвет градиента VB-системе topBar реакции-нативной навигации

Question

Я использую Wix's реагировать на родную навигацию V2.Я хочу дать градиент цвета верхней панели.Я успешно установил реактивный родной линейный градиент.Но я не понимаю, как задать цвет градиента для 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={['#a8ff78', '#78ffd6']} style={styles.container} /> в React Component и зарегистрируйте его, используя 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>