React-Native - this.props 未定义

Question

我的申请有问题。 我尝试导航到下一页，但出现此错误：TypeError: _this3.props.navigate is not a function。 （在 'this3.props.navigate' 中未定义）

真的，我用 console.log 检查了我的 this.props，结果是未定义的。 在其他组件中，我填充了道具并正常导航。 我也尝试了没有参数道具的构造函数。

发生了什么？

export default class GuidedMeditation extends Component {

    constructor(props) {
        super(props);
        this.state = {
          search: '',
          isLoading: true,
          dataSource: []
        };
      }

      componentDidMount() {

        api.get('api/v1/meditations-instructor') 
            .then(response => this.setState(
                {dataSource: response, isLoading: false}
                ))
            .catch(error => this.setState({error, isLoading: false}));
        }



    render() {
        console.log('props: ' + JSON.stringify(this.props));
        return (
            <Body style={styleProperties.bodyMeditation}>

                <View style={styleProperties.meditationCard}>
                    <ScrollView>
                    <FlatList
                        data={this.state.dataSource.data}
                        renderItem={({ item }) =>


                    <Card bordered style={styleProperties.meditationCard} >

                        <CardItem button onPress={() => this.props.navigate('MeditationPlayer')}>
                            <Left>
                                <Thumbnail square large source={{uri: 'https://loremflickr.com/50/50/love?random='+item.id}} />
                                <Body>
                                    <Text>{item.name}</Text>
                                    <Text note>{item.instructor_first_name == null ? '' : item.instructor_first_name +" "+item.instructor_last_name}</Text>
                                </Body>
                            </Left>
                        </CardItem>
                        <CardItem button onPress={() => alert("This is Card Header")}>
                            <Text>{item.meditation_description}</Text> 
                        </CardItem>
                    </Card>

                } keyExtractor={({ id }, index) => id} />

                    </ScrollView>

            </View>
        </Body>

        );
    }
}

通话

  <Button vertical
                                    style={{
                                        backgroundColor: this.state.selectedTab === 'guidedMeditation' ? '#41b25a' : undefined,
                                    }}
                                    active={this.state.selectedTab === 'guidedMeditation'}
                                    onPress={() => this.setState({selectedTab: 'guidedMeditation', showSearch: 'true'})}
                            >
                                <Icon name="list"/>
                                <Text>Meditação</Text>
                            </Button>

Answer 1

我认为应该是

this.props.navigation.navigate(...)

React-Native - this.props 未定义

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-05-22 03:57:07

React-Native - this.props 未定义

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-05-22 03:57:07

解决方案1
0 已采纳 2020-05-22 03:57:07