React Native 在页脚中添加一个按钮，显示带有选项的列表

3bygqnnd 于 2023-03-03 发布在 React

关注(0)|答案(1)|浏览(163)

我为我的应用程序创建了一个页脚，让用户可以浏览不同的页面。但是，有太多的屏幕要显示，所以我想在右边创建一个按钮，让用户看到一个列表，其中有更多的屏幕可以打开。我发现这在其他应用程序中很常见，请看下面的一个例子，"更多"按钮将提供该功能（即，打开用户可选择的其他屏幕列表）：
它应该是什么样子

我在谷歌上搜索了一下，但找不到具有此功能的示例代码。我读了关于"模态"的文章，但不确定这是否适用于页脚和/或是否是最简单的解决方案。
这是页脚中的项目，我希望编辑这些项目以显示包含其他屏幕的列表，而不是仅链接到一个屏幕：

<TouchableOpacity style={styles.innerBox} onPress={()=>navigation.navigate("TabsScreenD")}>
      <Entypo name="dots-three-horizontal" size={40} color="white" />
      <Text style={[Styles.text14L,{color:color.white, textAlign:"center"}]} >
            More
            </Text>
      </TouchableOpacity>

由于我是非常新的React原生我正在寻找一个简单的解决方案。
非常感谢!
编辑：很遗憾，我无法实现下面提出的解决方案。它似乎不适合我的应用程序的当前结构，或者我没有编辑代码的正确部分。
以下是我的应用程序当前外观的其他详细信息：
App.js:

const App = props => {
  return (
    <Provider store={store}>
      <AppNavigator />
    </Provider>
  );
};

AppNavigator.js:

export const AppNavigator = props => {
  
  return (
    <NavigationContainer>
     <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
        initialRouteName={"SplashScreen"}
        >
       <Stack.Screen name="SplashScreen" component={SplashScreen} />
       <Stack.Screen name="LoginScreen" component={LoginScreen} />
       <Stack.Screen name="HomeScreen" component={HomeScreen} />
       </Stack.Navigator>
    </NavigationContainer>
  );
};

FooterTabs.js:

const FooterTabs = ({navigation}) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.innerBox} onPress={()=>navigation.navigate("HomeScreen")}>
            <AntDesign name="home" size={40} color="white" />
            <Text style={[Styles.text14L,{color:color.white, textAlign:"center"}]}>
            Home
            </Text>
      </TouchableOpacity>
               
      <View style={styles.line} />
      <TouchableOpacity style={styles.innerBox} onPress={()=>navigation.navigate("TabsScreenD")}>
      <Entypo name="dots-three-horizontal" size={40} color="white" />
      <Text style={[Styles.text14L,{color:color.white, textAlign:"center"}]} >
            More
            </Text>
      </TouchableOpacity>
    </View>
  )
}

对不起，这是有点长。我试图缩短在可能的地方。谁能给我的意见，我需要编辑什么。根据纳齐尔的回答如下我试图取代'FooterTabs'与TabNavigator，但不能整合它正确。
再次感谢!

react-native

来源：https://stackoverflow.com/questions/75558806/adding-a-button-to-footer-that-shows-a-list-with-options

1条答案

按热度按时间

yduiuuwa1#

你应该使用Tab Navigation作为你的页脚，Stack Navigation作为你的屏幕。

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import StackNavigator from './StackNavigator'

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Entries" component={HomeScreen} />
<Tab.Screen name="State" component={HomeScreen} />
<Tab.Screen name="Plus" component={HomeScreen} />
        <Tab.Screen name="Calender" component={SettingsScreen} />
<Tab.Screen name="More" component={StackNavigator} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

在StackNavigator.js文件中，您必须创建堆栈导航器，它将根据您的需要具有多个屏幕。

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function StackNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Notifications" component={Notifications} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}
export default StackNavigator;

如果你想隐藏选项卡时，内屏幕的更多选项卡是可见的，你将不得不改变导航的结构。

<Stack.Navigator {...props}>
<Stack.Screen component={()=>
 <Tab.Navigator>
<Tab.screen />
<Tab.screen />
<Tab.screen />
<Tab.screen />
</Tab.Navigator>
}/>

<Stack.Screen name='ScreenName1' component={Component1}/>
<Stack.Screen name='ScreenName2' component={Component2}/>
<Stack.Screen name='ScreenName3' component={Component3}/>
.....
....
...
</Stack.Navigator>

赞(0）回复(0）举报 2023-03-03

我来回答

React Native 在页脚中添加一个按钮，显示带有选项的列表

1条答案

相关问题

热门标签

最新问答