如何在 React Native 中将屏幕添加到自定义底部导航
How to add screen to custom bottom navigation in react native
我是 React Native 的新手,正在尝试设计自定义底部导航栏,如图所示 here (Source code)
标签栏设计已成功创建,但我对如何在单击按钮时更改屏幕感到困惑。
基本上,我不明白如何将 React Native 导航组件连接到这个自定义底部标签栏。
我很期待使用 React navigation custom navbar support...但不确定如何实现它。
请帮忙。
提前致谢。
我从未尝试过这样做,但您可能可以通过使用默认堆栈导航器来做到这一点:https://reactnavigation.org/docs/navigating
那么,这是什么想法。您创建了 5 个不同的屏幕,并在每个屏幕上复制了这个标签栏。然后你用 navigation.navigate 属性为每个可能的情况写一个条件语句。我认为这是唯一的方法,但我不知道这将如何影响应用程序的性能
React Navigation Docs 真的很有帮助。查看我的解决方案 here.
解决方案是在通常的导航器定义中添加自定义标签栏设计的引用,并将状态、描述符、导航道具从导航器传递到自定义设计,如下所示。
/components/BottomBar/index.js: 定义导航模型,使用Tabbar作为自定义设计。
import * as React from "react";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { View } from "react-native";
import TabBar from "./Tabbar";
import Screen1 from "../../screens/Screen1";
import Screen2 from "../../screens/Screen2";
export const BottomMenu = () => {
const Tab = createBottomTabNavigator();
return (
<View style={{ flex: 1, position: "relative", justifyContent: 'flex-end'}}>
<Tab.Navigator
tabBar={(props) => <TabBar {...props} />}
>
<Tab.Screen name="screen1" component={Screen1} />
<Tab.Screen name="screen2" component={Screen2} />
<Tab.Screen name="screen3" component={Screen1} />
<Tab.Screen name="screen4" component={Screen2} />
</Tab.Navigator>
</View>
);
};
/components/BottomBar/TabBar.js:将导航器道具连同自定义图标详细信息一起传递到静态标签栏。
const { state, descriptors, navigation } = this.props
:
<StaticTabbar {...{ tabs, value, state, descriptors, navigation }} />
/components/BottomBar/StaticTabbar.js: 使用道具显示标签栏中的项目
const { tabs, value } = this.props;
const { state, descriptors, navigation } = this.props
return (
<View style={styles.container}>
{
state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const tabOption = tabs[index];
:
const key = index;
return (
<React.Fragment {...{ key }}>
<TouchableWithoutFeedback onPress={() => onPress(index)}>
<Animated.View style={[styles.tab, { opacity }]}>
<Icon name={tabOption.name} color="white" size={28} />
<Text style={{ fontSize: 11, color: 'white' }}>{tabOption.text}</Text>
</Animated.View>
</TouchableWithoutFeedback>
<Animated.View
style={{
position: "absolute",
top: -7,
left: tabWidth * index,
width: tabWidth,
height: 64, // Tab bar height
justifyContent: "center",
alignItems: "center",
opacity: opacity1,
transform: [{ translateY }],
}}
>
<View style={styles.activeIcon}>
<Icon name={tabOption.name} color="#004c40" size={25} />
</View>
</Animated.View>
</React.Fragment>
)
})}
</View>
);
我是 React Native 的新手,正在尝试设计自定义底部导航栏,如图所示 here (Source code)
标签栏设计已成功创建,但我对如何在单击按钮时更改屏幕感到困惑。 基本上,我不明白如何将 React Native 导航组件连接到这个自定义底部标签栏。
我很期待使用 React navigation custom navbar support...但不确定如何实现它。
请帮忙。
提前致谢。
我从未尝试过这样做,但您可能可以通过使用默认堆栈导航器来做到这一点:https://reactnavigation.org/docs/navigating 那么,这是什么想法。您创建了 5 个不同的屏幕,并在每个屏幕上复制了这个标签栏。然后你用 navigation.navigate 属性为每个可能的情况写一个条件语句。我认为这是唯一的方法,但我不知道这将如何影响应用程序的性能
React Navigation Docs 真的很有帮助。查看我的解决方案 here.
解决方案是在通常的导航器定义中添加自定义标签栏设计的引用,并将状态、描述符、导航道具从导航器传递到自定义设计,如下所示。
/components/BottomBar/index.js: 定义导航模型,使用Tabbar作为自定义设计。
import * as React from "react";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { View } from "react-native";
import TabBar from "./Tabbar";
import Screen1 from "../../screens/Screen1";
import Screen2 from "../../screens/Screen2";
export const BottomMenu = () => {
const Tab = createBottomTabNavigator();
return (
<View style={{ flex: 1, position: "relative", justifyContent: 'flex-end'}}>
<Tab.Navigator
tabBar={(props) => <TabBar {...props} />}
>
<Tab.Screen name="screen1" component={Screen1} />
<Tab.Screen name="screen2" component={Screen2} />
<Tab.Screen name="screen3" component={Screen1} />
<Tab.Screen name="screen4" component={Screen2} />
</Tab.Navigator>
</View>
);
};
/components/BottomBar/TabBar.js:将导航器道具连同自定义图标详细信息一起传递到静态标签栏。
const { state, descriptors, navigation } = this.props
:
<StaticTabbar {...{ tabs, value, state, descriptors, navigation }} />
/components/BottomBar/StaticTabbar.js: 使用道具显示标签栏中的项目
const { tabs, value } = this.props;
const { state, descriptors, navigation } = this.props
return (
<View style={styles.container}>
{
state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const tabOption = tabs[index];
:
const key = index;
return (
<React.Fragment {...{ key }}>
<TouchableWithoutFeedback onPress={() => onPress(index)}>
<Animated.View style={[styles.tab, { opacity }]}>
<Icon name={tabOption.name} color="white" size={28} />
<Text style={{ fontSize: 11, color: 'white' }}>{tabOption.text}</Text>
</Animated.View>
</TouchableWithoutFeedback>
<Animated.View
style={{
position: "absolute",
top: -7,
left: tabWidth * index,
width: tabWidth,
height: 64, // Tab bar height
justifyContent: "center",
alignItems: "center",
opacity: opacity1,
transform: [{ translateY }],
}}
>
<View style={styles.activeIcon}>
<Icon name={tabOption.name} color="#004c40" size={25} />
</View>
</Animated.View>
</React.Fragment>
)
})}
</View>
);