- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想将 BottomNavigation 添加到我的应用程序的屏幕之一,我已经使用了 StackNavigation。如何在路由流程中实现 BottomNavigation?
我试过这样做
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
}
));
关于android - 如何将 "createBottomTabNavigator "传递给 react native 导航路由中的 "createAppContainer",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56498556/
我正在尝试通过 AppContainer 传递 Prop 。我能够通过其他组件传入,但我不知道如何通过 createAppContainer 发送 props 在 App.js 中: render()
我收到以下错误:(0 _reactNavigationStack.createAppContainer) 不是函数。在安装 react-native-gesture-handler 并链接它后,我收到
我正在尝试从 v4 迁移到 v5,他们已经删除了 createAppContainer 并说要使用 NavigationContainer。 我正在使用 compatibility layer doc
正如您在我的简单代码中看到的,我没有使用 createNavigationContainer/createAppContainer,但我收到了那个错误。我不知道为什么会这样。我被卡住了! import
以下代码在我的 expo React Native 项目中运行良好: const AppNavigator = createSwitchNavigator({ Loading:Loading,
我想将 BottomNavigation 添加到我的应用程序的屏幕之一,我已经使用了 StackNavigation。如何在路由流程中实现 BottomNavigation? 我试过这样做 impor
因此,我尝试编写选项卡导航代码,但在编写 DrawerNavigation.js 时遇到错误。我是 React Native 的程序员,模拟器报错: 这是我的两个文件: DrawerNavigator
我是一名优秀的程序员,十分优秀!