Javascript 使用for循环和列表将道具传递给RN组件

我是一个很新的反应本土和反应一般，所以请原谅，如果我错过了一些核心概念，如何做我的尝试。我有两个组件，一个ScrollView组件，它将填充我的VendorListing组件。ScrollView内部是一个for循环，它遍历该列表中每个元素的列表，并将该元素的值传递给我的VendorListing组件。我希望我的VendorListing组件在ScrollView中呈现，并将它们各自的数据作为道具传递给它们

下面是我的ScrollView代码，我有一个包含我需要的所有信息的列表，以及一个将数据传递给VendorListing的for循环

var listingContent = [
    {
        title: 'Dentist',
        desc: 'This is generic dentist listing',
        add:'1455 Gerrard St. Toronto, ON',
        imgURI: '140x100.png',
        srtHr: '0800',
        clsHr: '1800',
    },
    {   
        title: 'Dentist 2',
        desc: 'This is generic dentist listing',
        add:'350 Kipling Ave. Toronto, ON',
        imgURI: '140x100.png',
        srtHr: '0800',
        clsHr: '1700',
    },
    {
        title: 'Physiotherapist',
        desc: 'This is generic physiotherapist listing',
        add:'1200 Yonge St. Toronto, ON',
        imgURI: '140x100.png',
        srtHr: '1000',
        clsHr: '2100',
    },
    {
        title: 'Barber',
        desc: 'This is generic barber listing',
        add:'985 Eglinton Ave. Toronto, ON',
        imgURI: '140x100.png',
        srtHr: '0900',
        clsHr: '2100',
    }
];
export default class ScrollViewListing extends Component{
    render(){
        var lst=[];
        j = listingContent.length;
        for(i=0;i<j;i++){
            lst.push(<VendorListing 
                info={listingContent.indexOf(i)}/>);
        };
        return(
            <View>
                <ScrollView>
                    {lst}
                </ScrollView>
            </View>
        );
    }
}

var listingContent=[
{
标题：“牙医”，
desc:'这是通用牙医列表'，
地址：'1455年，杰拉德圣多伦多，ON'，
imgURI:'140x100.png'，
srtHr:'0800'，
clsHr:'1800'，
},
{   
标题:"牙医2",，
desc:'这是通用牙医列表'，
地址：安大略省多伦多市吉卜林大道350号，
imgURI:'140x100.png'，
srtHr:'0800'，
clsHr:'1700'，
},
{
标题：“物理治疗师”，
描述：“这是普通物理治疗师列表”，
地址：'1200 Yonge St.Toronto，ON'，
imgURI:'140x100.png'，
srtHr:'1000'，
clsHr:'2100'，
},
{
标题：“理发师”，
desc:'这是通用理发师列表'，
地址：多伦多埃格林顿大道985号，
imgURI:'140x100.png'，
srtHr:'0900'，
clsHr:'2100'，
}
];
导出默认类ScrollViewListing扩展组件{
render（）{
var-lst=[]；
j=listingContent.length；
对于（i=0；i，可以使用

导出默认类ScrollViewListing扩展组件{
render（）{
返回(
{listingContent.map（信息=>(
))}
);
}
}

编辑：如前所述，最好使用平面列表。
您可以使用

导出默认类ScrollViewListing扩展组件{
render（）{
返回(
{listingContent.map（信息=>(
))}
);
}
}

编辑：如前所述，最好使用
FlatList
。
我认为您不需要在ScrollView中呈现for循环，因为您有RN FlatList可以为您实现这一点，并且更好地提高性能，因为它只呈现屏幕上可见的项目。（请参阅和）

对于您的bug，您正在调用
listingContent.indexOf（i）
，它只返回元素的索引，而不是元素本身。您应该调用
listingContent[listingContent.indexOf（i）]
，它可以通过
listingContent[i]简化
如果您想让它工作。
我认为您不需要在ScrollView中渲染for循环，因为您有RN FlatList，它可以为您这样做，并且更好地提高性能，因为它只渲染屏幕上可见的项目。（请参阅和）

对于你的bug，你正在调用
listingContent.indexOf（i）
，它只返回元素的索引，而不是元素本身。你应该调用
listingContent[listingContent.indexOf（i）]
，如果你想让它工作，可以通过
listingContent[i]
来简化它。
注意，他正在做
listingContent.indexOf（i）
在他作为示例发布的数组中返回
-1
，因为它找不到你提到的
indexOf
一个数字，我使用FlatList找到了一个示例，它好多了，我得到了我想要的效果。感谢你的帮助。注意，他正在做
listingContent.indexOf（I）
返回他作为示例发布的数组中的
-1
，因为它找不到你提到的
索引号，我使用FlatList找到了一个示例，它更好，我让它按照我想要的方式工作。谢谢你的帮助。

class VendorListing extends Component{
    render(){
        var info = this.props.info;
        return(
            <View style={styles.container}>
                <View style={styles.imageBox}>
                    <Image 
                        source={{}}
                    />
                </View>
                <View style={styles.content}>
                    <View style={styles.content1}>
                        <Text>{this.props.info}</Text>
                        <Text>{this.props.info}</Text>
                    </View>
                    <View style={styles.content2}>
                        <Text> Address</Text>
                        <Text>Open to Close</Text>
                    </View>
                </View>
            </View>
        );
    }
}

<Text>{this.props.info.title}</Text>
<Text>{this.props.info.desc}</Text>