试图让安卓系统上的TabBar不再需要点击标签图标
试图让安卓系统上的TabBar不再需要点击标签图标
提问于 2019-07-09 07:10:40
我正在尝试让我的选项卡图标在单击或不在TabBar中时呈现它们的屏幕。它可以在IOS上工作，但不能在Android上工作。选项卡选择范围似乎只能在TabBar内访问，而不能在外部访问，因为它没有附加到其图标上。当点击它的图标时，有没有办法让它在TabBar之外工作？谢谢
我尝试的另一种方法是将TabBar的高度设置为屏幕的100%，并使其backgroundColor透明，以便看到后面的屏幕，但它显示的是一个白色屏幕，并隐藏了它背后的内容。
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
}
});
回答 1
Stack Overflow用户
发布于 2019-07-12 15:55:43
如果有任何人对答案感兴趣，您只需创建一个组件并导航到相关选项卡。确保选项卡可见性为false，然后将构件放置在所需位置。这种做法将确保返回到以前的选项卡将保存以前页面上的以前的状态。
如果任何人感兴趣，我可以发布一个例子。目前没有回复，所以我将提交此答案。
我的结构略有不同，但这里有一个更简单的例子，我希望能对你有所帮助：
import React from 'react';
import {View,TouchableOpacity, PixelRatio, Image} from 'react-native'
import { createBottomTabNavigator, createAppContainer} from 'react-navigation'
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'
class Home extends React.Component{
render(){
const {navigation} = this.props;
const { routeName } = navigation.state;
return(
<View style={{flex:1,
backgroundColor:'grey'}}>
<TouchableOpacity
activeOpacity={0.7}
onPress={() => {
navigation.navigate("Home")
}}
style={ {position: 'relative',
width: PixelRatio.get() <= 2 ? 40 : 45,
height: PixelRatio.get() <= 2 ? 40 : 45,
alignItems: 'center',
justifyContent: 'center',
left: wp('5%'),
top: hp('11.5%'),
backgroundColor:routeName==="Home" ? 'black' : 'white' ,
borderRadius: PixelRatio.get() <= 2 ? 40/2 : 45/2}}>
<Image
source={require("./Icons/category.png")}
//pay FlatIcon or design personal one
style={{ resizeMode: 'contain',
width: PixelRatio.get() <= 2 ? 25 : 30,
height: PixelRatio.get() <= 2 ? 25 : 30,
tintColor: routeName==='Home'?'#81F018' : '#262A2C',
}}
/>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={0.7}
onPress={() => {
navigation.navigate("Alt")
}}
style={ {position: 'relative',
width: PixelRatio.get() <= 2 ? 40 : 45,
height: PixelRatio.get() <= 2 ? 40 : 45,
alignItems: 'center',
justifyContent: 'center',
left: wp('5%'),
top: hp('11.5%'),
backgroundColor:routeName==="Alt" ? 'black' : 'white' ,
borderRadius: PixelRatio.get() <= 2 ? 40/2 : 45/2}}>
<Image
source={require("./Icons/category.png")}
//pay FlatIcon or design personal one
style={{ resizeMode: 'contain',
width: PixelRatio.get() <= 2 ? 25 : 30,
height: PixelRatio.get() <= 2 ? 25 : 30,
tintColor: routeName==='Alt'?'#81F018' : '#262A2C',
}}
/>
</TouchableOpacity>
</View>)}}
class Alt extends React.Component{
render(){
const {navigation} = this.props;
const { routeName } = navigation.state;
return(
<View style={{flex:1,
backgroundColor:'white'}}>
<TouchableOpacity
activeOpacity={0.7}
onPress={() => {
navigation.navigate("Home")
}}
style={ {position: 'relative',
width: PixelRatio.get() <= 2 ? 40 : 45,
height: PixelRatio.get() <= 2 ? 40 : 45,
alignItems: 'center',
justifyContent: 'center',
left: wp('5%'),
top: hp('11.5%'),
backgroundColor:routeName==="Home" ? 'black' : 'white' ,
borderRadius: PixelRatio.get() <= 2 ? 40/2 : 45/2}}>
<Image
source={require("./Icons/category.png")}
//pay FlatIcon or design personal one
style={{ resizeMode: 'contain',
width: PixelRatio.get() <= 2 ? 25 : 30,
height: PixelRatio.get() <= 2 ? 25 : 30,
tintColor: routeName==='Home'?'#81F018' : '#262A2C',
}}
/>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={0.7}
onPress={() => {
navigation.navigate("Alt")
}}
style={ {position: 'relative',
width: PixelRatio.get() <= 2 ? 40 : 45,
height: PixelRatio.get() <= 2 ? 40 : 45,
alignItems: 'center',
justifyContent: 'center',
left: wp('5%'),
top: hp('11.5%'),
backgroundColor:routeName==="Alt" ? 'black' : 'white' ,
borderRadius: PixelRatio.get() <= 2 ? 40/2 : 45/2}}>
<Image
source={require("./Icons/category.png")}
//pay FlatIcon or design personal one
style={{ resizeMode: 'contain',
width: PixelRatio.get() <= 2 ? 25 : 30,
height: PixelRatio.get() <= 2 ? 25 : 30,
tintColor: routeName==='Alt'?'#81F018' : '#262A2C',
}}
/>
</TouchableOpacity>
</View>)}}
const AppTabNavigator = createBottomTabNavigator({
"Home": {
screen: Home,
},
"Alt": {
screen: Alt,
},
},
{
defaultNavigationOptions: {
tabBarVisible: false
},
}
)
export default createAppContainer(AppTabNavigator)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56947105
复制相关文章
相似问题
Power Automate Flow错误，拒绝访问(创建共享链接)
是否可以在SharePoint站点模板中包含Flow/Power Automate？
使用HTTP Request或fromo Power Automate flow触发管道
难以使用MS-Flow - Power Automate处理JSON
Power Automate flow不会为已存在的文件触发"Copy To“操作
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
