我为我的应用程序创建了一个页脚,让用户可以浏览到不同的页面。但是,要显示的屏幕太多,所以我想在右侧创建一个按钮,让用户看到一个列表,其中包含可以打开的其他屏幕。我发现这在其他应用程序中很常见,请参见下面的示例,其中“更多”按钮将提供该功能(即,用户可以选择的其他屏幕的打开列表):
我用谷歌搜索但找不到具有此功能的示例代码。我读到了“Modals”,但不确定这是否适用于页脚和/或是否是最简单的解决方案。
这是我要编辑的页脚中的项目,以显示带有其他屏幕的列表,而不是仅链接到一个屏幕:
<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-native 很陌生,所以我正在寻找一个简单的解决方案。
非常感谢!
编辑: 不幸的是,我无法实施下面提出的解决方案。它似乎不适合我应用程序的当前结构,或者我没有编辑代码的正确部分。
以下是我的应用程序当前外观的其他详细信息:
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>
)
}
对不起,这有点冗长。我尽量缩短。任何人都可以就我需要编辑的内容给我建议。根据下面 Nazir 的回答,我尝试用 TabNavigator 替换“FooterTabs”,但无法正确集成它。
再次感谢!
你应该为你的页脚使用 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
文件中,您必须创建 Stack Navigator,它将根据需要具有多个屏幕。
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>