无法在 TabNavigator 中切换标签 (react-navigation)
Can't switch Tabs in TabNavigator (react-navigation)
我正在使用 react-navigation
构建嵌套的 TabNavigator。
我的问题是 在单击搜索按钮之前我无法导航到其他选项卡。这太奇怪了。
(UPDATE) 我刚刚发现,当我更改选项卡时,它仅将 header 更改为 'Follow' 或 'Popular'。它不会呈现第二个选项卡 'Popular',也不会切换选项卡。
这是第一个 StackNavigator(附加到根)
export default StackNavigator ({
Feedo: {
screen: FeedMainTabNavigator,
navigationOptions: {
title: 'Title',
},
},
Searcho: {
screen: SearchScreen, // if I click second tab, it doesn't show the second tab.
//But then I navigate to SearchScreen and goback to FeedScreen,
//I can see the second tab was selected.
}
}, {
lazy: true
});
这是 FeedMainTabNavigator
export default TabNavigator({
UserFeed: {
screen: UserFeedScreen
},
PopularPost: {
screen: PopularPostScreen
},
}, {
tabBarOptions: {
style: {
backgroundColor: "#7E50CE",
overflow: "hidden"
},
activeTintColor: "white",
inactiveTintColor: "white",
tabStyle: { width: 120 },
indicatorStyle: { backgroundColor: 'white' }
}
}
);
这是 UserFeedScreen(可能这里有问题?)
import {withRkTheme, RkText} from 'react-native-ui-kitten'
let ThemedNavigationBar = withRkTheme(NavBar);
import { FontAwesome } from '../../assets/icons'
class UserFeedScreen extends Component {
static navigationOptions = ({navigation}) => ({
title: 'Follow',
headerRight: (
<RkText
rkType='awesome small'
style={{color: 'white'}}
onPress={() => {navigation.navigate('Searcho')}}>{FontAwesome.search}</RkText>
),
header: (headerProps) => {
return <ThemedNavigationBar navigation={navigation} headerProps={headerProps}/>
},
})
您需要重置,因为 Searcho
处于更高级别。试试这个
import { NavigationActions } from 'react-navigation';
将onPress={() => {navigation.navigate('Searcho')}}
替换为
onPress={() => {
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Searcho'})
]
});
navigation.dispatch(resetAction);
}}
我正在使用 react-navigation
构建嵌套的 TabNavigator。
我的问题是 在单击搜索按钮之前我无法导航到其他选项卡。这太奇怪了。
(UPDATE) 我刚刚发现,当我更改选项卡时,它仅将 header 更改为 'Follow' 或 'Popular'。它不会呈现第二个选项卡 'Popular',也不会切换选项卡。
这是第一个 StackNavigator(附加到根)
export default StackNavigator ({
Feedo: {
screen: FeedMainTabNavigator,
navigationOptions: {
title: 'Title',
},
},
Searcho: {
screen: SearchScreen, // if I click second tab, it doesn't show the second tab.
//But then I navigate to SearchScreen and goback to FeedScreen,
//I can see the second tab was selected.
}
}, {
lazy: true
});
这是 FeedMainTabNavigator
export default TabNavigator({
UserFeed: {
screen: UserFeedScreen
},
PopularPost: {
screen: PopularPostScreen
},
}, {
tabBarOptions: {
style: {
backgroundColor: "#7E50CE",
overflow: "hidden"
},
activeTintColor: "white",
inactiveTintColor: "white",
tabStyle: { width: 120 },
indicatorStyle: { backgroundColor: 'white' }
}
}
);
这是 UserFeedScreen(可能这里有问题?)
import {withRkTheme, RkText} from 'react-native-ui-kitten'
let ThemedNavigationBar = withRkTheme(NavBar);
import { FontAwesome } from '../../assets/icons'
class UserFeedScreen extends Component {
static navigationOptions = ({navigation}) => ({
title: 'Follow',
headerRight: (
<RkText
rkType='awesome small'
style={{color: 'white'}}
onPress={() => {navigation.navigate('Searcho')}}>{FontAwesome.search}</RkText>
),
header: (headerProps) => {
return <ThemedNavigationBar navigation={navigation} headerProps={headerProps}/>
},
})
您需要重置,因为 Searcho
处于更高级别。试试这个
import { NavigationActions } from 'react-navigation';
将onPress={() => {navigation.navigate('Searcho')}}
替换为
onPress={() => {
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Searcho'})
]
});
navigation.dispatch(resetAction);
}}