时间戳

首页 > 解决方案 > Wix React Native Navigation 的自定义选项卡导航

react-native - Wix React Native Navigation 的自定义选项卡导航

问题描述

我是 React Native 的新手。出于导航目的，我正在使用 wix 版本 1.1.486 的 react 本机导航库。

对于标签导航，我已经实现了这一点： -

在此处输入图像描述

有没有办法从下到上提升这个标签栏？

负责此的代码： -

import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
const startTabs = ()=>{

    Promise.all([
        Icon.getImageSource("md-map",30),
        Icon.getImageSource("ios-share-alt",30) 
    ]).then(sources =>{
        Navigation.startTabBasedApp({

            tabs: [
                {
                  label: 'One', 
                  title: 'One', 
                  screen: 'prabhuji.FlowerTabOne', 
                  icon: sources[0]

                },
                {
                    label: 'Two', 
                    title: 'Two', 
                    screen: 'prabhuji.FlowerTabTwo', 
                    icon: sources[1]
                },
                {
                    label: 'Three', 
                    title: 'Three', 
                    screen: 'prabhuji.FlowerTabThree', 
                    icon: sources[1]

                },
                {
                    label: 'Four',
                    title: 'Four', 
                    screen: 'prabhuji.FlowerTabFour', 
                    icon: sources[0]
                }
              ],
              tabsStyle: { 

              },
              appStyle: {
                orientation: 'portrait', // Sets a specific orientation to the entire app. Default: 'auto'. Supported values: 'auto', 'landscape', 'portrait'
                tabBarBackgroundColor: '#0f2362',
            }
        });
    });



}

export default startTabs;

标签： react-nativewix-react-native-navigation

解决方案

好吧，这个问题很久以前就被问过了，但它似乎仍然活跃，所以我会回答它。

您可以使用 iconInsets 将这个标签栏从下到上提升：{ top: 5, bottom: -5 }请明显带有值。Exmapl 代码可能是这样的

{
  component: {
    id: "accountsScreenBottomTabId",
    name: "TraderCientzone.AccountsScreen",
    waitForRender: true,
    options: {
      layout: {
        orientation: "portrait",
      },
      bottomTab: {
        iconColor: "#363636",
        selectedIconColor: "#ccb134",
        selectedTextColor: "#ccb134",
        text: localString("BOTTOM_MENU.ACCOUNT", locale),
        // icon: { uri: "acounts_icon" },
        icon: AccountsNormal,
        iconInsets: { top: 5, bottom: -5 },
      },
    },
  },
},

推荐阅读