从标题

时间:2017-02-10 21:02:16

标签: reactjs react-native

我正在使用来自react-native的新React-navigation。我的导航如下:

StackNavigator:

  1. TabNavigator // HomeNavigation
  2. TabNavigator // NotificationNavigation
  3. 完整代码:

    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的标题,则标题中不会显示SearchNotification。

    HomeNavigation.navigationOptions = {
        title: 'Home',
        header: {
            tintColor: 'white',
            style: {
                backgroundColor: '#2ec76e',
            },
            right: ({navigate}) => <SearchNotification navigate={navigate}/>
        },
    };
    

    如何从标题中的按钮导航到不同的屏幕?

2 个答案:

答案 0 :(得分:8)

所以问题是(我认为),在navigationOptions内而不是使用navigations我必须使用navigate,并将其作为道具传递给孩子(即<强> 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>
        )
    }
}

答案 1 :(得分:2)

对我有用的代码:

import Header from '../Containers/Header'
.........................................
navigationOptions: ({ navigation }) => ({
      title: 'Find User',
      headerRight: <Header navigation={navigation} />,
      headerStyle: styles.header
    })

转到其他屏幕:

this.props.navigation.navigate('UserDetail', {});