Пользовательская навигация по вкладкам с помощью встроенной навигации Wix React

Я новичок в React Native. и для целей навигации я использую встроенную библиотеку навигации от wix версии 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;

react-native wix-react-native-navigation
person Sandip Nag    schedule 07.10.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

ну, вопрос был задан давно, но, похоже, он все еще активен, поэтому я отвечу на него.

вы можете использовать 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 },
      },
    },
  },
},
person Danish    schedule 25.09.2019

arrow_upward
-3
arrow_downward

Загрузите исходный код отсюда (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)

Спасибо!

person Deepshikha Puri    schedule 05.02.2019
comment
OP запрашивает React-Native-Navigation (Wix), а не реакцию-навигацию. - person NEOline; 15.04.2019