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

时间:2018-12-16 00:59:34

标签: react-native wix-react-native-navigation

我是新来响应本机导航和本机导航(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;

with this error

1 个答案:

答案 0 :(得分:0)

您将此静态函数添加到组件中

[j, i]

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