реагировать на родной способ отображения вкладок «Навигация по вкладкам» и «Навигация по ящикам» на одном экране - PullRequest
0 голосов
/ 06 февраля 2019

как отобразить вкладки «Навигация по вкладкам» и «Навигация по ящикам» на одном экране и объединить вкладки «Навигация», «Выноска по ящикам» и «Стеки» вместе в React Navigation »

мое приложение просто показывает Навигатор ящиков без навигации по вкладкам

введите описание изображения здесь

, и он - моя вторая проблема: она не появилась в ящике исходного файла file.png, а значок {Дом, категория, ..} не появилсяв правильном порядке введите описание изображения здесь

import React from 'react';
import {
    createStackNavigator,
    createDrawerNavigator,
    DrawerItems,
    createBottomTabNavigator
} from 'react-navigation';

import {View,Image,SafeAreaView,ScrollView} from 'react-native';

import Home     from '../screens/Home/index';
import Category from '../screens/Category/index';
import Favourite from '../screens/Favourite/index';
import Time      from '../screens/Time/index';
import Going     from '../screens/Going/index';


const Tabs = createBottomTabNavigator({
        Home: { screen: Home,
            navigationOptions: {


                tabBarIcon: (
                    <Image style={{ width: 50, height: 50 }}
                           source={require('./BottomBarIcon/home_icon.png')} />
                )
            }
        },
        Category: { screen: Category,
            navigationOptions: {


                tabBarIcon: (
                    <Image style={{ width: 50, height: 50 }}
                           source={require('./BottomBarIcon/cat_icon.png')} />
                )
            }
        },  Favourite: { screen: Favourite,
            navigationOptions: {


                tabBarIcon: (
                    <Image style={{ width: 50, height: 50 }}
                           source={require('./BottomBarIcon/fav_icon.png')} />
                )
            }
        },
        Time: { screen: Time,
            navigationOptions: {


                tabBarIcon: ({tintColor}) => (
                    <Image style={{ width: 50, height: 50 }}
                           source={require('./BottomBarIcon/cal_icon.png')} />
                )
            }
        },

        Going: { screen: Going,
            navigationOptions: {


                tabBarIcon: (
                    <Image style={{ width: 50, height: 50 }}
                           source={require('./BottomBarIcon/sug_icon.png')} />
                )
            } },
    }

    ,
    {

        tabBarOptions:{
            showLabel: false,

            activeTintColor: 'orange',
            inactiveTintColor: 'grey',
            style: {backgroundColor: '#4f8db3',height:70,
            },


        },

        showIcon: true,

    },


);






const CustomDrawerComponent=(props)=> (
    <SafeAreaView style={{flex: 1}}>
        <View style={{height: 200, backgroundColor: '#89c6de'}}>
            <Image source={require('../screens/images/source file.png')} style= {{height:120, width:200}} />
        </View>

        <ScrollView>
            <DrawerItems {...props} />
        </ScrollView>

    </SafeAreaView>

)


const DrawerNavigator = createDrawerNavigator({
        Home: {
            screen: Home,
            navigationOptions: {


                drawerIcon: (
                    <Image style={{ width: 30, height: 30 }}
                           source={require('../screens/images/home.png')} />
                ),

            }
        },
        Category: {
            screen: Category,
            navigationOptions: {

                drawerIcon: (
                    <Image style={{ width: 30, height: 30 }}
                           source={require('../screens/images/Category.png')} />
                )
            }
        },
        Favourite: {
            screen: Favourite,
            navigationOptions: {


                drawerIcon: (
                    <Image style={{ width: 30, height: 30 }}
                           source={require('../screens/images/Favourite.png')} />
                )
            }
        },

        Time: {
            screen: Time,
            navigationOptions: {


                drawerIcon: (
                    <Image style={{ width: 30, height: 30 }}
                           source={require('../screens/images/Calendar.png')} />
                )
            }
        },

        Going: {
            screen: Going,
            navigationOptions: {


                drawerIcon: (
                    <Image style={{ width: 30, height: 30 }}
                           source={require('../screens/images/Tick-inside-circle.png')} />
                )
            }
        },

    },
    {

        contentComponent:CustomDrawerComponent
    },



);







const StackNavigator = createStackNavigator({
    
    //important: key and screen name (i.e. DrawerNavigator) should be same while using the drawer navigator inside stack navigator.
    
    DrawerNavigator:{
        screen: DrawerNavigator,
        navigationOptions: {
            header:null,
        }
    },

}


);

export default StackNavigator;
import React, {Component} from 'react'
import {View,Text, Image, StyleSheet,StatusBar, TouchableOpacity} from 'react-native'


export default class Home extends Component{


  menuClick(){
    this.props.navigation.openDrawer()
  }




  render(){
    return(




        <View >


          <View style={styles.topBar}>

            <View style={styles.leftHeader}>
              <TouchableOpacity style={styles.imgClick} onPress={this.menuClick.bind(this)}>
                <Image style={styles.imgMenu} source={require('../images/menu-button.png')}></Image>
              </TouchableOpacity>
            </View>


            <Text style={styles.txtBar}>Home</Text>
            <View style={styles.rightHeader}></View></View>
          <View style={styles.contentBar}>


          </View>


        </View>
    )
  }



}


const styles = StyleSheet.create({

  topBar:{
    height:150,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-between',
    backgroundColor: '#2b313f',
  },


  leftHeader:{
    flex:1,
    marginLeft:10,
    justifyContent:'flex-start',
  },


  rightHeader:{
    flex:1,
    justifyContent:'flex-end',
  },


  txtBar:{
    color: '#ffffff',

  },


  contentBar:{
    flex:1,
    justifyContent:'center',
    alignItems:'center'
  },


  imgMenu:{
    width:60,
    height:60,


  },


  imgClick:{
    width:40,
    height:40,
    justifyContent:'center'
  },


  imgHome:{
    width: 200,
    height: 200
  },
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...