Пользовательская навигация по вкладкам по Wix React Собственная навигация - PullRequest
Новая
       1

Пользовательская навигация по вкладкам по Wix React Собственная навигация

0 голосов
/ 07 октября 2018

Я новичок в React Native.и для целей навигации я использую встроенную библиотеку реагирования по версии wix 1.1.486.

Для навигации по вкладкам я достиг этого: -

enter image description here

Есть ли способ поднять эту панель вкладок снизу вверх?

Код, отвечающий за это: - 

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;

1 Ответ

0 голосов
/ 05 февраля 2019

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

Спасибо!

...