react-native - 在不属于本机底部选项卡的屏幕中显示导航底部栏
问题描述
我在本机应用程序中有三个选项卡和 8 个屏幕。我已经按如下方式创建了底部选项卡导航器,并且我在选项卡中还有 5 个我不想要的屏幕,但在这些屏幕上,需要正常的三个选项卡底部栏导航器。确切的帮助表示赞赏。
const TabNavigation = createBottomTabNavigator(
{
Scan: {
screen: ScanScreen,
navigationOptions: {
tabBarLabel: 'Scan',
tabBarIcon: () => <Ionicons name="ios-qr-scanner-outline" size={32} color="blue" />
,
},
},
Patient: {
screen: PatientStack,
navigationOptions: {
tabBarLabel: 'Patients',
tabBarIcon: () => <Ionicons name="ios-people" size={32} color="blue" />
,
},
},
Setting: {
screen: SettingScreen,
navigationOptions: {
tabBarLabel: 'Setting',
tabBarIcon: () => <Ionicons name="ios-settings" size={32} color="blue" />
,
},
},
},
{
lazyLoad: true,
animationEnabled: false,
tabBarPosition: 'bottom',
tabBarOptions: {
showIcon: true,
showLabel: true,
activeTintColor: '#7117ea',
inactiveTintColor: '#7117ea',
style: {
backgroundColor: '#eff0f1'
},
iconStyle: {
width: 40
},
tabStyle: {
height: 60
}
},
},
);
解决方案
这是一个示例代码,它将解决您的问题(希望如此)在此有三个场景,在底部栏中呈现两个屏幕,在单击链接后呈现第三个场景,但底部栏将在那里。
import React from 'react';
import { Button, Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
<Button
title="Go to Settings"
onPress={() => this.props.navigation.navigate('Settings')}
/>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
<Button
title="Go to Home"
onPress={() => this.props.navigation.navigate('Home')}
/>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}
class DetailsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Details!</Text>
</View>
);
}
}
const HomeStack = createStackNavigator({
Home: { screen: HomeScreen },
Details: { screen: DetailsScreen },
});
const SettingsStack = createStackNavigator({
Settings: { screen: SettingsScreen },
Details: { screen: DetailsScreen },
});
export default createBottomTabNavigator(
{
Home: { screen: HomeStack },
Settings: { screen: SettingsStack },
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Home') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
} else if (routeName === 'Settings') {
iconName = `ios-options${focused ? '' : '-outline'}`;
}
// You can return any component that you like here! We usually use an
// icon component from react-native-vector-icons
return <Ionicons name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'red',
inactiveTintColor: 'gray',
},
}
);
推荐阅读
- ruby-on-rails - 没有任何关联的活动记录连接表出现问题
- python - 想用索引替换 N 维数组的值吗?
- arrays - 如何更改从状态反应映射的数组中对象的值
- javascript - 如何测试 stenciljs 嵌套组件
- powershell - 如何使用powershell根据用户位置映射多个网络驱动器?
- php - 尝试使用正则表达式解析数字
- php - CentOS 7 / PHP 7:只能通过 IP 访问站点
- javascript - 如何减小超过 600 mb 的 Electron 封装尺寸
- javascript - JavaScript:在不使用 ES6 {} 快捷方式的情况下创建给定 .map() 输入参数的对象
- python - 如何修复 numpy TypeError:不支持的操作数类型 -:'str' 和 'str'