Question

import React from 'react';
import {
    StyleSheet,
    Text,
    View,
    ScrollView,
} from 'react-native';

import { Content, Card, CardItem, Body, Icon, Image, Right, Left, Thumbnail, Button } from 'native-base';
import  HTMLView from 'react-native-htmlview'

import styles from '../components/CustomStyles'
import htmlstyles from '../styles/htmlstyles'

import TimeAgo from 'react-native-timeago'


export default class QuestionsData extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state =
            {
                navigation: null
            }
    }

    componentDidMount()
    {
        this.state.navigation = this.props.navigation;
    }

    viewExtraFile = () =>{
        this.props.navigation.navigate("ExtraFile");
    };

    render() {

        let questions = this.props.data.map(function (questionData, index)
        {
            let  extra_file = "";
            if(questionData.extra_file_details.file_name !== undefined)
            {
                extra_file = (<CardItem>
                    <Button transparent onPress={()=> this.viewExtraFile()}> <Text style={styles.linkText}>{questionData.extra_file_details.file_name} </Text></Button>
                </CardItem>);
            }
            return (
                <Card transparent style={styles.card}>
                    <CardItem>
                        <Left>
                            <Thumbnail source={{uri: questionData.poster_image_url}} />
                            <Body>
                            <Text style={styles.username}>{questionData.poster_name}</Text>
                            <Text note style={styles.category}>{questionData.section_name}</Text>

                            </Body>
                        </Left>
                    </CardItem>
                    <CardItem content>
                        <HTMLView stylesheet={htmlstyles}
                            value={questionData.question }/>
                    </CardItem>
                    {extra_file}
                    <CardItem>
                        <Left>
                            <Button transparent>
                                <Icon name="thumbs-up" />
                                <Text>{questionData.num_applause} Applause</Text>
                            </Button>
                        </Left>
                        <Body>
                        <Button transparent>
                            <Icon  name="chatbubbles" />
                            <Text>{questionData.num_answers} Answers</Text>
                        </Button>
                        </Body>
                        <Right>
                            <Button transparent>
                                <Icon name='time'/>
                                <Text><TimeAgo time={questionData.time}/></Text>
                            </Button>

                        </Right>
                    </CardItem>
                </Card>
            )
        });
        return (

            <Content>
                {questions}
            </Content>
        );
    }


}

我无法访问viewExtraFile方法，有人请帮助我如何做到

Answer 1

更改

this.props.data.map(function (questionData, index)
{

到

this.props.data.map((questionData, index) => {

否则this内的map将不会引用地图外的this。

Answer 2

经过一些迭代工作后，我做了这个并且有效了

export default class QuestionsData extends React.Component

{ 构造函数（道具） { 超级（道具）; this.state = { 导航：null } }

componentDidMount()
{
    this.state.navigation = this.props.navigation;
}

questionList(props)
{
    return props.data.map(function (questionData, index)
    {
        let  extra_file = "";
        if(questionData.extra_file_details.file_name !== undefined)
        {
            extra_file = (<CardItem>
                <Button transparent onPress={()=> props.navigation.navigate("ExtraFile")}> <Text style={styles.linkText}>{questionData.extra_file_details.file_name} </Text></Button>
            </CardItem>);
        }
        return (
            <Card transparent style={styles.card}>
                <CardItem>
                    <Left>
                        <Thumbnail source={{uri: questionData.poster_image_url}} />
                        <Body>
                        <Text style={styles.username}>{questionData.poster_name}</Text>
                        <Text note style={styles.category}>{questionData.section_name}</Text>

                        </Body>
                    </Left>
                </CardItem>
                <CardItem content>
                    <HTMLView stylesheet={htmlstyles}
                              value={questionData.question }/>
                </CardItem>
                {extra_file}
                <CardItem>
                    <Left>
                        <Button transparent>
                            <Icon name="thumbs-up" />
                            <Text>{questionData.num_applause} Applause</Text>
                        </Button>
                    </Left>
                    <Body>
                    <Button transparent>
                        <Icon  name="chatbubbles" />
                        <Text>{questionData.num_answers} Answers</Text>
                    </Button>
                    </Body>
                    <Right>
                        <Button transparent>
                            <Icon name='time'/>
                            <Text><TimeAgo time={questionData.time}/></Text>
                        </Button>

                    </Right>
                </CardItem>
            </Card>
        )
    });
}

render() {
    return (

        <Content>
            {this.questionList(this.props)}
        </Content>
    );
}

}

我创建了一个显示列表

的函数

无法在react native render方法中访问map函数内的类函数

2 个答案: