从标题中的按钮导航到不同的屏幕
从标题中的按钮导航到不同的屏幕
提问于 2017-02-11 05:02:16
我正在使用来自react-native的新React-navigation。我有如下导航：
StackNavigator：
- TabNavigator // HomeNavigation
- TabNavigator // NotificationNavigation
完整代码：
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的header，SearchNotification不会显示在header中。
HomeNavigation.navigationOptions = {
title: 'Home',
header: {
tintColor: 'white',
style: {
backgroundColor: '#2ec76e',
},
right: ({navigate}) => <SearchNotification navigate={navigate}/>
},
};如何从标题中的按钮导航到不同的屏幕？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-17 04:23:52
所以(我认为)问题在于，在navigationOptions中，我不得不使用navigate而不是navigations，并将其作为道具传递给子对象(即SearchNotification).
因此，最终的代码如下所示：
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>
)
}
}Stack Overflow用户
发布于 2018-03-18 23:15:23
为我工作的代码：
import Header from '../Containers/Header'
.........................................
navigationOptions: ({ navigation }) => ({
title: 'Find User',
headerRight: <Header navigation={navigation} />,
headerStyle: styles.header
})并移动到其他屏幕：
this.props.navigation.navigate('UserDetail', {});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42168623
复制相关文章
相似问题