Я пытаюсь заставить иконки своих вкладок отображать свои экраны, когда на них нажимают, а когда их нет в TabBar.Он работает с IOS, но не с Android.Кажется, что диапазон выбора вкладок может быть достигнут только внутри TabBar, а не за его пределами, кроме того, он не прикреплен к своим значкам.Есть ли способ заставить его работать за пределами TabBar при нажатии на его значок?Спасибо
Другой способ, который я попробовал, это сделать высоту TabBar на 100% экрана и сделать ее backgroundColor Transparent, чтобы видеть экран позади, но вместо этого он показывает белый экран и скрывает содержимое позади него.
import React from 'react'
import {
StyleSheet,
Text,
View,
Image
} from 'react-native'
import {
createBottomTabNavigator,
createAppContainer
} from 'react-navigation'
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp
} from 'react-native-responsive-screen'
class DocSelection extends React.Component {
render() {
return ( <
View style = {
styles.container
} >
<
Text > CustomerService < /Text>
<
/View>
)
}
}
class Printing extends React.Component {
render() {
return ( <
View style = {
styles.container
} >
<
Text > hfhdfjedhfeehfjeh < /Text>
<
/View>
)
}
}
class Design extends React.Component {
render() {
return ( <
View style = {
styles.container
} >
<
Text > 874877847484787 < /Text>
<
/View>
)
}
}
const RouteConfigs = {
'Home': {
screen: DocSelection,
navigationOptions: { //tabBarButtonComponent: tabBarIcon: ({ tintColor, horizontal }) => (
<
Image style = {
{
margin: 15,
width: 35,
height: 35,
tintColor: "red"
}
}
source = {
require("../Icons/home.png")
}
/> ), }, }, 'Order history':{ screen: Printing, navigationOptions: { backgroundColor: '#262A2C', top:-60, borderTopWidth: 0, tabBarIcon: ({ tintColor }) => ( <
Image style = {
{
width: 32,
height: 32,
tintColor: "red"
}
}
source = {
require("../Icons/history-clock-button.png")
}
/> ), }, }, 'Customer service':{ screen: Design, navigationOptions: { tabBarIcon: ({ tintColor }) => ( <
Image style = {
{
top: 0,
margin: 15,
width: 40,
height: 40,
tintColor: "red"
}
}
source = {
require("../Icons/customer-service.png")
}
/> ), }, }, }; const DrawerNavigatorConfig = { intialRouteName: 'Home', navigationOptions: { tabBarVisible: true }, tabBarOptions: { tabStyle:{ top:-130, height:0 }, showLabel: false, style:{ backgroundColor:"rgba(255, 0, 0, 0)" }, }, }; const Navigator = createBottomTabNavigator(RouteConfigs, DrawerNavigatorConfig);
export default createAppContainer(Navigator);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
top: 300
}
});