React native 如何在react native中向自定义底部导航添加屏幕
我对react native不太熟悉,并尝试设计一个自定义的底部导航栏,如图所示() 选项卡栏设计已成功创建,但我不知道如何在单击按钮时更改屏幕。 基本上,我无法理解如何将React本机导航组件连接到这个自定义底部选项卡栏 我期待着使用。。。但不确定如何实现相同的功能 请帮忙React native 如何在react native中向自定义底部导航添加屏幕,react-native,react-navigation-v5,react-navigation-bottom-tab,React Native,React Navigation V5,React Navigation Bottom Tab,我对react native不太熟悉,并尝试设计一个自定义的底部导航栏,如图所示() 选项卡栏设计已成功创建,但我不知道如何在单击按钮时更改屏幕。 基本上,我无法理解如何将React本机导航组件连接到这个自定义底部选项卡栏 我期待着使用。。。但不确定如何实现相同的功能 请帮忙 提前感谢。我从未尝试过这样做,但您可能可以使用默认的堆栈导航器: 那么,这个想法是什么呢。您创建5个不同的屏幕,并在每个屏幕上复制此选项卡栏。然后使用navigation.navigate prop为每个可能的情况编写一个
提前感谢。我从未尝试过这样做,但您可能可以使用默认的堆栈导航器:
那么,这个想法是什么呢。您创建5个不同的屏幕,并在每个屏幕上复制此选项卡栏。然后使用navigation.navigate prop为每个可能的情况编写一个条件语句。我认为这是唯一的方法,但我不知道这将如何影响应用程序的性能我从未尝试过这样做,但您可能可以使用默认的堆栈导航器:
那么,这个想法是什么呢。您创建5个不同的屏幕,并在每个屏幕上复制此选项卡栏。然后使用navigation.navigate prop为每个可能的情况编写一个条件语句。我认为这是唯一的方法,但我不知道这将如何影响应用程序的性能。导航文档真的很有用。看看我的解决方案 解决方案是在通常的导航器定义中添加自定义选项卡栏设计的引用,并将状态、描述符、导航道具从导航器传递到自定义设计,如下所示 /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>
);
};
import*as React from“React”;
从“@react navigation/bottom tabs”导入{createBottomTabNavigator};
从“react native”导入{View};
从“/TabBar”导入TabBar;
从“../../screens/Screen1”导入Screen1;
从“../../screens/Screen2”导入Screen2;
导出常量底部菜单=()=>{
const Tab=createBottomTabNavigator();
返回(
}
>
);
};
/components/BottomBar/TabBar.js:将导航器道具与自定义图标详细信息一起传递到静态选项卡栏
const { state, descriptors, navigation } = this.props
:
<StaticTabbar {...{ tabs, value, state, descriptors, navigation }} />
const{state,描述符,导航}=this.props
:
/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>
);
const{tabs,value}=this.props;
const{state,描述符,navigation}=this.props
返回(
{
state.routes.map((路由,索引)=>{
const{options}=描述符[route.key];
const tabOption=制表符[索引];
:
常量键=索引;
返回(
onPress(索引)}>
{tabOption.text}
)
})}
);
React导航文档非常有用。看看我的解决方案
解决方案是在通常的导航器定义中添加自定义选项卡栏设计的引用,并将状态、描述符、导航道具从导航器传递到自定义设计,如下所示
/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>
);
};
import*as React from“React”;
从“@react navigation/bottom tabs”导入{createBottomTabNavigator};
从“react native”导入{View};
从“/TabBar”导入TabBar;
从“../../screens/Screen1”导入Screen1;
从“../../screens/Screen2”导入Screen2;
导出常量底部菜单=()=>{
const Tab=createBottomTabNavigator();
返回(
}
>
);
};
/components/BottomBar/TabBar.js:将导航器道具与自定义图标详细信息一起传递到静态选项卡栏
const { state, descriptors, navigation } = this.props
:
<StaticTabbar {...{ tabs, value, state, descriptors, navigation }} />
const{state,描述符,导航}=this.props
:
/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>
);
const{tabs,value}=this.props;
const{state,描述符,navigation}=this.props
返回(
{
state.routes.map((路由,索引)=>{
const{options}=描述符[route.key];
const tabOption=制表符[索引];
:
常量键=索引;
返回(
onPress(索引)}>
{tabOption.text}
)
})}
);
我正在寻找类似。。。但不确定如何实施same@R.K下面展示了如何将onPress事件添加到选项卡栏:所以请尝试一下这个。要添加自定义图标,您需要使用它们创建字体。因此,请使用以下网站:或此网站:。您需要重新构建或使用选项卡栏来实现您想要做的事情。阅读更多的React导航文档,因为它们提供了很多有用的信息我正在寻找类似。。。但不确定如何实施same@R.K下面展示了如何将onPress事件添加到选项卡栏:所以请尝试一下这个。要添加自定义图标,您需要使用它们创建字体。因此,请使用以下网站:或此网站:。您需要重新构建或使用选项卡栏来实现您想要做的事情。阅读更多React导航文档,因为它们提供了很多有用的信息。你能检查一下这个问题吗?这是相关的吗@奥利弗。。。是的,这个问题与。。。你必须遵循同样的解决方案