javascript - React Navigation - 如何在选项卡导航器中嵌套包装堆栈导航器的组件
问题描述
我正在尝试拥有一个选项卡导航器,其中设置屏幕/选项卡是一个组件,其中包含一个堆栈导航器。
这是我目前拥有的代码(也可以作为零食找到)。
import * as React from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import { createAppContainer, createStackNavigator, createBottomTabNavigator } from 'react-navigation';
class ScreenA extends React.Component {
static navigationOptions = {
tabBarLabel: 'A',
};
render() {
return (
<View>
<Text>Screen A</Text>
</View>
);
}
}
class SettingsHome extends React.Component {
render() {
return (
<Button onPress={() => this.props.navigation.navigate('SettingsScreenA')}>
<Text>Navigate to Settings A</Text>
</Button>
);
}
}
class SettingsScreenA extends React.Component {
render() {
return (
<View>
<Text>Settings A</Text>
<Button onPress={() => this.props.navigation.navigate('SettingsA')}>
<Text>Back to SettingsHome</Text>
</Button>
</View>
);
}
}
const SettingsStackNavigator = createStackNavigator({
SettingsHome: { screen: SettingsHome },
SettingsScreenA: { screen: SettingsScreenA }
})
class SettingsScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Settings',
}
render() {
return (
<View>
<Text>Some other components...</Text>
<SettingsStackNavigator navigation={this.props.navigation}/>
</View>
);
}
}
const RootTabNavigator = createBottomTabNavigator({
ScreenA: { screen: ScreenA },
Settings: {screen: SettingsScreen },
});
const Navigation = createAppContainer(RootTabNavigator);
export default class App extends React.Component {
render() {
return (
<Navigation />
);
}
}
我目前收到“类型错误:在导航状态中找不到“路线””错误。您是否尝试传递 React 组件的导航道具?
解决方案
您需要将组件本身嵌套在 a 中stackNavigator
,包含所有的stackScreen
,就像这样;
import * as React from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import { createAppContainer, createStackNavigator, createBottomTabNavigator } from 'react-navigation';
class ScreenA extends React.Component {
static navigationOptions = {
tabBarLabel: 'A',
};
render() {
return (
<View style={{alignItems:'center', justifyContent:'center', flex:1}}>
<Text>Screen A</Text>
</View>
);
}
}
class SettingsHome extends React.Component {
render() {
return (
<Button onPress={() => this.props.navigation.navigate('SettingsScreenA')}
title ="Navigate to Settings A"
/>
);
}
}
class SettingsScreenA extends React.Component {
render() {
return (
<View style={{alignItems:'center', justifyContent:'center', flex:1}}>
<Text>Settings A</Text>
<Button onPress={() => this.props.navigation.navigate('SettingsHome')}
title ="Back to SettingsHome"
/>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{alignItems:'center', justifyContent:'center', flex:1}}>
<Text>Some other components...</Text>
<Button title="Seting A" onPress={() => this.props.navigation.navigate('SettingsScreenA')} />
</View>
);
}
}
// Create our stack navigator
const SettingsStackNavigator = createStackNavigator({
SettingsMain: {screen: SettingsScreen,},
SettingsHome: { screen: SettingsHome },
SettingsScreenA: { screen: SettingsScreenA }
}, {initialRouteName: 'SettingsMain'})
const RootTabNavigator = createBottomTabNavigator({
ScreenA: { screen: ScreenA },
Settings: {screen: SettingsStackNavigator },
});
// And the app container
export default createAppContainer(RootTabNavigator);
希望能帮助到你!
推荐阅读
- java - 单元测试 - 无法加载 ApplicationContext
- sql - VBA 过程中的 SQL 子句帮助
- arrays - 从评估创建一维数组
- flutter - Flutter:无法或更改 TabController 的选项卡之间滑动的敏感性
- rest - 在 actionIndex 中使用 expand
- c# - XUnit Class Fixture (IClassFixture) is being executed twice
- python - 从命令行运行python脚本时找不到模块错误
- java - Spring Security 配置 - 403 禁止
- c# - 如何使用 blazor 客户端应用程序在服务器上创建新文件?
- django - 即使不在字段中,也包含 ModelForm 字段