android - 如何在反应原生导航路由中将“createBottomTabNavigator”传递给“createAppContainer”
问题描述
我想在我的应用程序的一个屏幕上添加一个底部导航,我已经使用了 StackNavigation。如何在路由流中实现底部导航?
我试过这样做
import React from 'react';
import LoginForm from './src/Login/LoginForm';
import Register from './src/Register/Register';
import Timeline from './src/Timeline/Timeline';
import Post from './src/Product/Post';
import Profile from './src/Profile/Profile';
import IconWithBadge from './src/Utility/IconWithBadge';
import {createBottomTabNavigator,createStackNavigator,createSwitchNavigator, createAppContainer } from "react-navigation";
import { Font } from 'expo';
const AuthStack = createStackNavigator(
{
LoginScreen: {screen:LoginForm,navigationOptions: { header: null }},
RegisterScreen: {screen: Register,navigationOptions: { header: null }},
},
{
initialRouteName: "LoginScreen",
}
);
const AppStack = createStackNavigator(
createBottomTabNavigator(
{
TimelineScreen:Timeline,
ProductScreen:Post
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'TimelineScreen') {
iconName = `ios-home${focused ? '' : '-outline'}`;
// Sometimes we want to add badges to some icons.
// You can check the implementation below.
IconComponent = IconWithBadge;
} else if (routeName === 'ProductScreen') {
iconName = `ios-plus`;
}
// You can return any component that you like here!
return <IconComponent name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
}
)
)
const AppContainer = createAppContainer(
createSwitchNavigator(
{
Auth: AuthStack,
App: AppStack
}
));
export default class App extends React.Component {
render() {
return (
<AppContainer/>
);
}
}
这是 IconWithBadge.js
import React, {Component} from 'react';
class IconWithBadge extends React.Component {
render() {
const { name, badgeCount, color, size } = this.props;
return (
<View style={{ width: 24, height: 24, margin: 5 }}>
<Ionicons name={name} size={size} color={color} />
{badgeCount > 0 && (
<View
style={{
// /If you're using react-native < 0.57 overflow outside of the parent
// will not work on Android, see https://git.io/fhLJ8
position: 'absolute',
right: -6,
top: -3,
backgroundColor: 'red',
borderRadius: 6,
width: 12,
height: 12,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>
{badgeCount}
</Text>
</View>
)}
</View>
);
}
}
这是我的 App.js
import React from 'react';
import LoginForm from './src/Login/LoginForm';
import Register from './src/Register/Register';
import Timeline from './src/Timeline/Timeline';
import Post from './src/Product/Post';
import Profile from './src/Profile/Profile';
import IconWithBadge from './src/Utility/IconWithBadge';
import {createBottomTabNavigator,createStackNavigator,createSwitchNavigator, createAppContainer } from "react-navigation";
const AuthStack = createStackNavigator(
{
LoginScreen: {screen:LoginForm,navigationOptions: { header: null }},
RegisterScreen: {screen: Register,navigationOptions: { header: null }},
},
{
initialRouteName: "LoginScreen",
}
);
const AppStack = createStackNavigator(
{
TimelineScreen: {screen:Timeline,navigationOptions: { header: null,title: "Welcome to the dashboard" }}
}
)
const AppContainer = createAppContainer(
createSwitchNavigator(
{
Auth: AuthStack,
App: AppStack
}
));
export default class App extends React.Component {
render() {
return (
<AppContainer/>
);
}
}
我的代码似乎不适用于我在这里的设置,如何将底部导航路由放入 stacknavgiation 以便在 TimelineScreen 上看到它
解决方案
修改您的代码如下。基本上替换createSwitchNavigator
为createBottomTabNavigator
const AppContainer = createAppContainer(
createBottomTabNavigator(
{
Auth: AuthStack,
App: AppStack
}
));
推荐阅读
- tsql - 尝试操作字符串,例如 if '26169;#c785643',那么结果应该类似于 'c785643'
- node.js - socket.on 内的 socket.emit 在客户端 Socket.io 上不起作用
- ms-word - 将 PowerPoint 笔记窗格复制到 Word 会导致字体大小不一致
- mongodb - MongoDB 聚合框架通过 id 加入两个多面集合
- java - 将 Quarkus 应用于非 maven、非 gradle Java 项目
- regex - 如果全部为真,如何组合两个或多个正则表达式并匹配
- java - 来自 Hibernate 的多级对象的延迟加载
- vue.js - Vue:我可以在计算属性中使用组件过滤器吗?
- javascript - 在概念化如何将 if else 语句更改为 switch 语句时遇到问题
- microsoft-cognitive - 无法获取 Microsoft Academic 的认知服务实验室 API 密钥