Question

我有像这样的自定义标题

import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet, Image } from 'react-native';
import { Header, Left, Right, } from 'native-base';
import { Icon } from 'react-native-elements';

export default class MainHeader extends React.Component {

pressSearch() {
    this.props.navigation.navigate('Login');
}
render () {
    return(
        <Header style={{paddingTop:25}}>
            <Left style={{marginBottom:10}}>
                <TouchableOpacity>
                    <View style={{flexDirection:'row'}}>
                        <Image
                            style={styles.stretch}
                            source={require('../images/logoforplay.png')}
                        />
                        <Text style={styles.headerText} > Eventlinn </Text>
                    </View>
                </TouchableOpacity>
            </Left>
            <Right>
                <TouchableOpacity
                    style={styles.headerButton}
                    onPress={this.pressSearch.bind(this)}
                >
                    <Icon
                        name={'search'}
                    />
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.headerButton}
                >
                    <Icon
                        name={'add-location'}
                    />
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.headerButton}
                >
                    <Icon
                        name={'notifications'}
                    />
                </TouchableOpacity>
            </Right>
        </Header>


      )
    }
}
const styles = StyleSheet.create ({
    mainContainer: {
        flex:1,
        backgroundColor:'white'
    },
    cardContainer: {
        flex:1
    },
    stretch: {
        height:35,
        width:35,
    },
    headerText: {
        fontSize:24,
        marginTop:3,
    },
    headerButton: {
        marginBottom:10,
        marginLeft:15
    }
})

我的问题navigation.navigate无法正常工作。我的路由器工作正常，因为我可以导航到“登录”用另一个屏幕。我读了一些关于纯组件的东西，但仍然不明白如何解决这个问题。你有什么建议？顺便说一句，我是新来的做出反应。

Answer 1

如果您的标题不是您的应用程序头部路由器中的路径，则需要使用来自react-router的路由器

import {withNavigation} from 'react-navigation'
export default withNavigation(MainHeader)

现在您应该能够访问this.props.navigation而不直接将其作为父组件的prop传递。

Answer 2

在顶部使用import { withNavigation } from 'react-navigation';，然后在末尾使用export default withNavigation(FilmItem);。

参阅文档：https://reactnavigation.org/docs/en/connecting-navigation-prop.html

反应导航this.props.navigation undefined

2 个答案: