Как показать кнопку верхней панели с нижними вкладками и боковым ящиком - PullRequest
Новая
       3

Как показать кнопку верхней панели с нижними вкладками и боковым ящиком

0 голосов
/ 16 декабря 2018

Я новичок, чтобы реагировать на нативную и нативную навигацию (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;

enter image description here

1 Ответ

0 голосов
/ 16 декабря 2018

Вы добавляете эту статическую функцию в свой компонент 

 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

...