Wix React Native Navigation自定义标签导航

Question

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

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

有什么方法可以将此选项卡栏从底部抬到顶部？

负责此操作的代码：-

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;

Answer 1

这个问题早在很久以前就问过，但是它似乎仍然活跃，所以我会回答。

您可以使用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 },
      },
    },
  },
},

Answer 2

从此处下载源代码（Tab Navigation React Native）

您还可以使用默认导航库在React native中创建底部标签栏，如下所示。

const BottomNavigation = createBottomTabNavigator({
Home:{
    screen: HomeScreen,
    tabBarOptions: { 
        showIcon: true 
      },
    navigationOption:{
        tabBarIcon: ({ tintColor }) => (
            <Icon name='../../assets/home_icon.png' size={20}/>
          )
    }
},
Movie:{
    screen: MovieScreen,
    tabBarOptions: { 
        showIcon: true 
      },
     navigationOption:{
        tabBarIcon: ({ tintColor }) => (
            <Icon name='../../assets/home_icon.png' size={20}/>
          )
    }
},


Sport:{
    screen: SportScreen,
    tabBarOptions: { 
        showIcon: true 
      },
    navigationOption:{
        tabBarIcon: ({ tintColor }) => (
            <Icon name='../../assets/home_icon.png' size={20}/>
          )
    }
}
})
const NavigationContainer = createAppContainer(BottomNavigation)

谢谢！