简体   繁体   English

如何在 React Native 中实现一个 BottomTabNavigator?

[英]How to implement a BottomTabNavigator in React Native?

I am NEW to React Native, and I am struggling to implement a BottomTabNavigator on my LoggedIn screen.我是 React Native 的新手,我正在努力在我的 LoggedIn 屏幕上实现一个 BottomTabNavigator。 Below is my code on my App.js file in order to implement the navigation structure, though I am having no look.下面是我的 App.js 文件中的代码,以实现导航结构,尽管我没有看。 Could someone kindly tell me what is wrong with the code and explain how to implement it successfully?有人可以告诉我代码有什么问题并解释如何成功实现它吗? Much appreciated.非常感激。

I have two screens: LoggedIn and PostMessage.我有两个屏幕:LoggedIn 和 PostMessage。

 import React from 'react';
 import { View, Text} from 'react-native';
 import { createBottomTabNavigator } from "react-navigation-tabs";


 import PostMessage from "../screens/PostMessage";
 import LoggedIn from "../screens/LoggedIn";


const BottomTab = createBottomTabNavigator({
LoggedIn: {
screen: LoggedIn
},

 PostMessage: {
screen: PostMessage
},

});


export default BottomTab;

There seems to be a lot missing from this snippet.这个片段似乎有很多遗漏。 With that said you can look into using React Navigation 5. It really very simple to use and robust to give all the navigation flows that you might need not just tabs.话虽如此,您可以考虑使用 React Navigation 5。它非常易于使用且非常强大,可以提供您可能需要的所有导航流,而不仅仅是选项卡。 Below are some using links regarding the tabs and another for general navigation using it下面是一些关于选项卡的使用链接,另一个用于使用它的一般导航

https://reactnavigation.org/docs/tab-based-navigation https://reactnavigation.org/docs/tab-based-navigation

https://reactnavigation.org/blog/2020/01/29/using-react-navigation-5-with-react-native-paper https://reactnavigation.org/blog/2020/01/29/using-react-navigation-5-with-react-native-paper

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 React Native BottomTabNavigator 导航不起作用 - React Native BottomTabNavigator navigation not working React Native:以编程方式更改bottomTabNavigator路线 - React Native: Change bottomTabNavigator route programmatically BottomTabNavigator 中的图标和文本在 React Native 中重叠 - icon & text overlap in BottomTabNavigator in react native 在 React Navigation v3 中单击 React Native 中 bottomTabNavigator 上的选项卡时,如何刷新我的组件? - How do I refresh my component when clicked on tab on bottomTabNavigator in React Native, in React Navigation v3? React-Native:有没有人运行过bottomTabNavigator 的例子? - React-Native: have anyone a running example for a bottomTabNavigator? 在 React Native expo 移动应用程序中,BottomTabNavigator 位于顶部而不是底部 - BottomTabNavigator coming on top instead of bottom in React Native expo mobile app 如何在本地响应中实现分页? - How to implement the pagination in react native? 如何在React Native中实现DRM? - How to implement DRM in react native? 如何在React Navigation中获取BottomTabNavigator来显示Modal StackNavigator? - How do I get a BottomTabNavigator in React Navigation to display a Modal StackNavigator? 如何在 React Navigation (4.x) 的特定屏幕中隐藏 BottomTabNavigator - How to hide BottomTabNavigator in certain screen in React Navigation (4.x)
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM