как отобразить вкладки «Навигация по вкладкам» и «Навигация по ящикам» на одном экране и объединить вкладки «Навигация», «Выноска по ящикам» и «Стеки» вместе в 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
},
})