如何显示带有底部标签和侧抽屉的顶部栏按钮

Question

我是响应原生和响应原生导航 (v2) 的新手，并且一直在努力实现顶部导航按钮，即显示顶部导航。

我希望添加一个带有按钮的顶部栏，该按钮可以触发侧抽屉，但无法确定如何显示顶部导航。

这是我的底部标签和侧画的工作配置：

const mainTabs = async () => {
  Navigation.setRoot({
    root: {
      sideMenu: {
        left: {
          component: {
            name: 'foo.SideDrawer',
          },
        },
        center: {
          id: 'MY_STACK',
          bottomTabs: {
            children: [
              {
                component: {
                  name: 'foo.HomeScreen',
                  options: {
                    bottomTab: {
                      fontSize: 12,
                      text: 'Home',
                      icon: await Icon.getImageSource("home", 30)
                    }
                  }
                },
              },
              {
                component: {
                  name: 'foo.ProfileScreen',
                  options: {
                    bottomTab: {
                      text: 'Profile',
                      fontSize: 12,
                      icon: await Icon.getImageSource("person", 30)
                    }
                  }
                },
              }
            ]
          }
        }
      }
    }
  })
};

谁能建议顶部栏和按钮配置应该放在哪里？

--

编辑 1 - 主屏幕组件：

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

class HomeScreen extends Component {

    static get options() {
        return {
          topBar: {
            title: {
              text: 'Home',
            },
            leftButtons: [
              {
                icon: require('../../assets/signin.png'),
                text: 'Button one',
                id: 'homeButton',
              },
            ],
          },
        };
      }

    render () {
        return (
            <View style={styles.container}>
                <Text>Home Screen</Text>
          </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F0EFE8'
    }
  })

export default HomeScreen;

Answer 1

你在你的组件中添加这个静态函数

 export default class HomeScreen extends Component {

 static get options() {
    return {
      topBar: {
        title: {
          text: 'Home',
        },
        leftButtons: [
          {
            icon: require('../../../assets/icons/icon.png'),
            id: 'homeButton',
          },
        ],
      },
    };
  }
 }

在这里你可以找到所有需要的配置https://wix.github.io/react-native-navigation/#/docs/topBar-buttons