我正在尝试使用一个标签导航器,其中设置屏幕/标签是一个组件,其中包括一个堆栈导航器。
这是我当前拥有的代码(也可以找到as a snack)。
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组件的导航道具'
答案 0 :(得分:0)
您需要将组件本身嵌套在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);
希望有帮助!