从标题中的按钮导航到不同的屏幕 [英] Navigate to different screen from a button in a header
问题描述
我正在使用 react-native 的新 React-navigation.我的导航如下:
I am using the new React-navigation from react-native. I have the navigation as follows:
堆栈导航器:
- TabNavigator//主页导航
- TabNavigator//通知导航
完整代码:
const MainNavigation = StackNavigator({
Home: {
screen: HomeNavigation,
},
Notification: {
screen: NotificationNavigation,
}
});
const HomeNavigation = TabNavigator({
AllPost: {
screen: All,
},
ArticlePost: {
screen: Article,
},
BusinessPost: {
screen: Job,
},
});
HomeNavigation.navigationOptions = {
title: 'Home',
header: {
right: <SearchNotification/>
},
};
class SearchNotification extends React.Component {
goToNotification = () => {
this.props.navigate('Notification');
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity>
<Icon name="md-search" style={styles.Icon}/>
</TouchableOpacity>
<TouchableOpacity style={styles.notificationWrapper} onPress={this.goToNotification}>
<Icon name="md-notifications" style={styles.Icon}/>
<Text style={styles.number}>3</Text>
</TouchableOpacity>
</View>
)
}
}
const NotificationNavigation = TabNavigator({
Comment: {
screen: NotificationComment,
},
Follow: {
screen: NotificationFollow,
}
});
HomeNavigation 有一个头部,头部有一个 SearchNotification 的正确组件.SearchNotification 有一个图标,按下后我想转到 NotificatoinNavigation.
HomeNavigation has a header, and the header has a right component of SearchNotification. SearchNotification has an icon which on press I would like to go to the NotificatoinNavigation.
但是,如果我将 HomeNavigation 的标题更改为这种方式,则 SearchNotification 不会显示在标题中.
However, if I make changes to the header of HomeNavigation to this way, the SearchNotification is not displayed in the header.
HomeNavigation.navigationOptions = {
title: 'Home',
header: {
tintColor: 'white',
style: {
backgroundColor: '#2ec76e',
},
right: ({navigate}) => <SearchNotification navigate={navigate}/>
},
};
如何从标题中的按钮导航到不同的屏幕?
How can I navigate to different screen from a button in a header?
推荐答案
所以问题是(我认为),在 navigationOptions
内部而不是使用 navigations
我不得不使用navigate
,并将其作为道具传递给孩子(即SearchNotification).
So the problem was (I think), inside the navigationOptions
instead of using navigations
I had to use navigate
, and pass it as a props to the child (i.e. the SearchNotification).
所以最终的代码是这样的:
So the final code looks like this:
HomeNavigation.navigationOptions = {
title: 'Home',
header: ({navigate}) => ({
right: (
<SearchNotification navigate={navigate}/>
),
}),
};
在 SearchNotification 组件中:
export default class SearchNotification extends React.Component {
goToNotification = () => {
this.props.navigate('Notification');
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity>
<Icon name="md-search" style={styles.Icon}/>
</TouchableOpacity>
<TouchableOpacity style={styles.notificationWrapper}
onPress={() => this.props.navigate('Notification')}>
<Icon name="md-notifications" style={styles.Icon}/>
<Text style={styles.number}>3</Text>
</TouchableOpacity>
</View>
)
}
}
这篇关于从标题中的按钮导航到不同的屏幕的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!