Javascript 如何在React Native中为特定元素呈现平面列表中的函数
我有一个平面列表组件，如下所示：Javascript 如何在React Native中为特定元素呈现平面列表中的函数,javascript,reactjs,react-native,Javascript,Reactjs,React Native,我有一个平面列表组件，如下所示： <FlatList // data={this.state.planName.concat(this.state.serviceName)} data={planDetails[0].nbs_plans.concat(planDetails[0].nbs_services)} //data defined in constructor ItemSeparatorComponen
<FlatList
// data={this.state.planName.concat(this.state.serviceName)}
data={planDetails[0].nbs_plans.concat(planDetails[0].nbs_services)}
//data defined in constructor
ItemSeparatorComponent={this.FlatListItemSeparator}
//Item Separator View
renderItem={({ item, index }) => (
// Single Comes here which will be repeatative for the FlatListItems
<View style={styles.cellContainerStyle} >
<View backgroundColor = {"transparent"} flexDirection = {'row'} justifyContent= {'flex-start'} margin={0}>
<View backgroundColor={'#73c573'} justifyContent= {'center'} alignItems={'center'} width={35} height={35} marginTop={0} paddingTop={0}>
<View backgroundColor={'#73c573'} width={25} height={25}>
<CheckBox size={25}
keyValue={1}
selectedArrayObject={selectedArrayOBJ}
checked={false}
label = ''
color="transparent"
labelColor="#00703c"
checkBoxClick={this.checkBoxOnClicked}/>
</View>
</View>
<View flex={1.75} backgroundColor={'transparent'} marginLeft={5}>
<Text style={{ color: '#00703c', fontSize: 21, fontFamily: 'SourceSansPro-Bold' }}> {item.name}</Text>
</View>
<View flex={0.15} marginTop={10}>
<TouchableOpacity style = {{ backgroundColor: 'transparent' }} onPress = {this.props.seeMore} >
<Image source={require('../../../assets/img/iOS/chevron_right.png')} style={styles.rightArrowImageStyle}/>
</TouchableOpacity>
</View>
</View>
<View style={styles.cellSubViewTwo}>
<Text style = {styles.textHeaderStyle}>This plan includes:</Text>
<View backgroundColor = {"transparent"} flexDirection='column' marginTop={5}>
{/* <Text>{JSON.stringify(this.state.serviceDetails[index].map(name=> name))} </Text> */}
<SelectableChips selectedChipStyle={selectableStyles} initialChips={item.extension_attributes.productServicetList} onChangeChips={(chips) => console.log(chips)} alertRequired={false} backgroundColor={"transparent"}
//initialChips={this.state.serviceDetails.concat(this.state.additionalServiceDetails)[index]} onChangeChips={(chips) => console.log(chips)} alertRequired={false} backgroundColor={"transparent"}
subView={
<TouchableOpacity style = {{ backgroundColor: 'transparent' }} onPress = {this.gotoDetailsPage(item.extension_attributes, index)} >
<View backgroundColor={'transparent'} flexDirection = {'row'} alignItems= {'center'} marginLeft={5}>
<Text style={styles.seeMoreStyle}>See more</Text>
<Image source={require('../../../assets/img/iOS/chevron_right.png')} style={styles.rightArrowSeeMoreImageStyle}/>
</View>
</TouchableOpacity>
} />
</View>
</View>
<Service
applicationType={item.extension_attributes.price.applicationType}
serviceType={this.state.serviceType[index]}
isButton={false}
firstApplicationPrice={item.extension_attributes.price.firstApplicationPrice}
//firstApplicationPrice={this.state.firstApplicationPrice.concat(this.state.serviceFirstApplicationPrice)[index]}
remainingApplicationPrice={item.extension_attributes.price.remainingApplicationPrice}
remainingApplicationCount={item.extension_attributes.price.remainingApplicationCount}
prePayDiscount={item.extension_attributes.price.PerPayDiscount}
validity={item.extension_attributes.price.validity}
/* remainingApplicationPrice={this.state.remainingApplicationPrice.concat(this.state.serviceRemainingApplPrice)[index]}
remainingApplicationCount={this.state.remainingApplicationCount.concat(this.state.serviceRemainingApplCount)[index]}
prePayDiscount={this.state.prePayDiscount.concat(this.state.servicePrepayDiscount)[index]}
validity={this.state.validity.concat(this.state.service_validity)[index]}*/
/>
</View>
)}
/>
gotoDetailsPage=(dtls, index)=>{
alert(dtls.cartState[index]);
this.props.navigation.navigate('Detail', {details: dtls});
}
export const planDetails = [
{
"nbs_plans":[
{
"productId":"11",
"sku":"6561",
"name":"TruHealth Lawn Plan",
"description":"Get out and enjoy the greenest, healthiest lawn possible with this comprehensive plan, which provides essential nutrients, protection, organic soil amendments and lawn aeration.",
"service_line":"HPLAWN",
"extension_attributes":{
"price":{
"firstApplicationPrice":"$29.95",
"remainingApplicationPrice":"$50.95",
"remainingApplicationCount":"7",
"oneTimePrice":"119.00",
"oneTimeCount":"1",
"PerPayDiscount":"$35.42",
"annualApplicationPrice":"",
" pricePerApplicationPrice":"",
"applicationType":"First Application",
"SubTotal":"$505.60",
"TotalPriceWithPrePayDiscount":"470.18",
"validity":"11/17/2019"
},
"productServicetList":[
{
"name":"Fertilizer",
"isIncluded":"TRUE",
"description":" Fertilizer Description"
},
{
"name":"Aeration",
"isIncluded":"TRUE",
"description":" Aeration Description"
},
{
"name":"Lime",
"isIncluded":"FALSE",
"description":" Lime Description"
}
],
"videoUrl":"https://youtube.com/7385fjdhgvbdf",
"cartState":"FALSE"
}
},
{
"productId":"12",
"sku":"6562",
"name":"Fall Aeration with Overseed",
"description":"Get out and enjoy the greenest, healthiest lawn possible with this comprehensive plan, which provides essential nutrients, protection, organic soil amendments and lawn aeration.",
"service_line":"HPLAWN",
"extension_attributes":{
"price":{
"firstApplicationPrice":"$40",
"remainingApplicationPrice":"",
"remainingApplicationCount":"",
"oneTimePrice":"",
"oneTimeCount":"",
"PerPayDiscount":"$11.13",
"annualApplicationPrice":"159.00",
" pricePerApplicationPrice":"",
"applicationType":"Annual Application",
"SubTotal":"$159.00",
"TotalPriceWithPrePayDiscount":"147.87",
"validity":"01/10/2020"
},
"productServicetList":[
{
"name":"Aeration",
"isIncluded":"TRUE",
"description":" Aeration Description"
},
{
"name":"Seed",
"isIncluded":"TRUE",
"description":" Seed Description"
}
],
"videoUrl":"",
"cartState":"FALSE"
}
},
{
"productId":"13",
"sku":"6563",
"name":"Sprinkler Maintenance Program",
"description":"Get out and enjoy the greenest, healthiest lawn possible with this comprehensive plan, which provides essential nutrients, protection, organic soil amendments and lawn aeration.",
"service_line":"HPLAWN",
"extension_attributes":{
"price":{
"firstApplicationPrice":"$60",
"remainingApplicationPrice":"",
"remainingApplicationCount":"",
"oneTimePrice":"",
"oneTimeCount":"5",
"PerPayDiscount":"$31.15",
"annualApplicationPrice":"",
" pricePerApplicationPrice":"$89.00",
"applicationType":"Price Per Application",
"SubTotal":"$445.00",
"TotalPriceWithPrePayDiscount":"413.85",
"validity":"11/17/2019"
},
"productServicetList":[
{
"name":"Sprinkler Maintenance",
"isIncluded":"TRUE",
"description":" Sprinkler Description"
},
{
"name":"Sprinkler Heads",
"isIncluded":"TRUE",
"description":" Sprinkler Description"
},
{
"name":"Inspection",
"isIncluded":"TRUE",
"description":" Inspection Description"
},
{
"name":"Winterization",
"isIncluded":"TRUE",
"description":" Winterization Description"
}
],
"videoUrl":"https://youtube.com/7385fjdhgvbdf",
"cartState":"TRUE"
}
},
{
"productId":"14",
"sku":"6564",
"name":"Spring and Fall Lime Service",
"description":"Get out and enjoy the greenest, healthiest lawn possible with this comprehensive plan, which provides essential nutrients, protection, organic soil amendments and lawn aeration.",
"service_line":"HPLAWN",
"extension_attributes":{
"price":{
"firstApplicationPrice":"$50.95",
"remainingApplicationPrice":"$50.95",
"remainingApplicationCount":"1",
"oneTimePrice":"",
"oneTimeCount":"",
"PerPayDiscount":"$7.14",
"annualApplicationPrice":"",
" pricePerApplicationPrice":"",
"applicationType":"First Application",
"SubTotal":"$101.90",
"TotalPriceWithPrePayDiscount":"94.76",
"validity":"11/17/2019"
},
"productServicetList":[
{
"name":"Lime",
"isIncluded":"TRUE",
"description":" Lime Description"
}
],
"videoUrl":"",
"cartState":"FALSE"
}
},
{
"productId":"21",
"sku":"6571",
"name":"Tree & Shrub Care",
"description":"This TruGreen Service requires more information for pricing keep this service selected during checkout and recieve a call back to tailor your quote.",
"service_line":"HPLAWN",
"serviceType":'customquote',
"extension_attributes":{
"price":{
"firstApplicationPrice":"$0.00",
"remainingApplicationPrice":"$0.00",
"remainingApplicationCount":"0",
"oneTimePrice":"",
"oneTimeCount":"",
"PerPayDiscount":"$0.00",
"annualApplicationPrice":"",
" pricePerApplicationPrice":"",
"applicationType":"",
"SubTotal":"$0.00",
"TotalPriceWithPrePayDiscount":"0",
"validity":""
},
"productServicetList":[
{
"name":"Healthy Lawn Guarantee",
"isIncluded":"TRUE",
"description":" Healthy Lawn Description"
}
],
"videoUrl":"",
"cartState":"FALSE"
}
}
],
"nbs_services":[
{
"productId":"15",
"sku":"6565",
"name":"FireAnt Control",
"description":"When the weather starts to heat up,so does fire ant activity.Thats why Trugreen offers two different ways of controlling fire ants: broadcast treatments that cover your entire yard or targeted mound treatments applied near specific ant hills ",
"service_line":"Aeration",
"extension_attributes":{
"price":{
"firstApplicationPrice":"",
"remainingApplicationPrice":"$0.00",
"remainingApplicationCount":"0",
"oneTimePrice":"$00.00",
"oneTimeCount":"1",
"PerPayDiscount":"$6.23",
"validity":"11/17/2020",
"AnnualApplication":"$88.95",
"applicationType":"First Application",
},
"productServicetList":[
{
"name":"Aeration",
"isIncluded":"TRUE"
}
],
"productServicetListDescription":[
{
"name":" Aeration",
"description":" Aeration Description"
}
],
"videoUrl":"",
"cartState":"FALSE"
}
},
{
"productId":"16",
"sku":"6566",
"name":"Fertilization",
"description":"Our slow-release formula is applied at key points in every season to stimulate and maintain growth.",
"service_line":"Aeration",
"extension_attributes":{
"price":{
"firstApplicationPrice":"$29.95",
"remainingApplicationPrice":"$50.95",
"remainingApplicationCount":"6",
"oneTimePrice":"$13.00",
"oneTimeCount":"1",
"PerPayDiscount":"$23.52",
"validity":"11/20/2019",
"applicationType":"First Application",
},
"productServicetList":[
{
"name":"Aeration",
"isIncluded":"TRUE"
}
],
"productServicetListDescription":[
{
"name":" Fertilizer",
"description":"Fertilizer Description"
}
],
"videoUrl":"",
"cartState":"FALSE"
}
},
{
"productId":"17",
"sku":"6567",
"name":" Pre-Emergent & Targeted Weed Control ",
"description":" You’ll love your lawn, guaranteed. We’ll make any necessary adjustments to ensure your satisfaction.*",
"service_line":"Weed",
"extension_attributes":{
"price":{
"AnnualApplication":"$82.95",
"remainingApplicationPrice":"$0.00",
"remainingApplicationCount":"0",
"oneTimePrice":"$13.00",
"oneTimeCount":"1",
"PerPayDiscount":"$5.81",
"validity":"11/20/2019",
"applicationType":"First Application",
},
"productServicetList":[
{
"name":"Weed",
"isIncluded":"TRUE"
}
],
"productServicetListDescription":[
{
"name":" Weed",
"description":"Weed Description"
}
],
"videoUrl":"",
"cartState":"FALSE"
}
},
{
"productId":"18",
"sku":"6568",
"name":" Sprinkler Maintenance ",
"description":"Our affordable Annual Sprinkler maintenance plan and our expert repair service will help prevent costly damage,conserve water and keep yor sprinkler system in top shape year-round",
"service_line":"Weed",
"extension_attributes":{
"price":{
"priceperapplication":"$89.00",
"remainingApplicationPrice":"$0.00",
"remainingApplicationCount":"5",
"oneTimePrice":"$13.00",
"oneTimeCount":"1",
"PerPayDiscount":"$31.15",
"validity":"11/25/2019",
"applicationType":"Price Per Application",
},
"productServicetList":[
{
"name":"Weed",
"isIncluded":"TRUE"
}
],
"productServicetListDescription":[
{
"name":" Weed",
"description":"Weed Description"
}
],
"videoUrl":"https://youtube.com/7385fjdhgvbdf",
"cartState":"FALSE"
}
},
{
"productId":"19",
"sku":"6569",
"name":" chinch bug ",
"description":"protects against invasive chinch bugs common to your area",
"service_line":"Bugs",
"extension_attributes":{
"price":{
"Annual Application":"$82.95",
"remainingApplicationPrice":"$0.00",
"remainingApplicationCount":"0",
"oneTimePrice":"$0.00",
"oneTimeCount":"1",
"PerPayDiscount":"$5.81",
"validity":"11/30/2019",
"applicationType":"Price Per Application",
},
"productServicetList":[
{
"name":" Bugs ",
"isIncluded":"TRUE"
}
],
"productServicetListDescription":[
{
"name":" Bugs ",
"description":"Bug Description"
}
],
"videoUrl":"",
"cartState":"TRUE"
}
},
{
"productId":"20",
"sku":"6570",
"name":" Healthy Lawn Guarantee",
"description":" You’ll love your lawn, guaranteed. We’ll make any necessary adjustments to ensure your satisfaction.* ",
"service_line":"Lawn",
"extension_attributes":{
"price":{
"First Application":"$50.95",
"remainingApplicationPrice":"$50.95",
"remainingApplicationCount":"1",
"oneTimePrice":"$0.00",
"oneTimeCount":"1",
"PerPayDiscount":"$7.14",
"validity":"11/30/2020",
"applicationType":"Annual Application",
},
"productServicetList":[
{
"name":" Lawn infosys ",
"isIncluded":"TRUE"
}
],
"productServicetListDescription":[
{
"name":" Lawn ",
"description":"Lawn Description"
}
],
"videoUrl":"https://youtube.com/7385fjdhgvbdf",
"cartState":"FALSE"
}
},
{
"productId":"10",
"sku":"6560",
"name":"TruComplete℠ Lawn Care Plan",
"description":"Get out and enjoy the greenest, healthiest lawn possible with this comprehensive plan, which provides essential nutrients, protection, organic soil amendments and lawn aeration.",
"service_line":"HPLAWN",
"extension_attributes":{
"price":{
"firstApplicationPrice":"$29.95",
"remainingApplicationPrice":"$50.95",
"remainingApplicationCount":"7",
"oneTimePrice":"",
"oneTimeCount":"",
"PerPayDiscount":"$27.09",
"annualApplicationPrice":"",
" pricePerApplicationPrice":"",
"applicationType":"First Application",
"SubTotal":"$386.60",
"TotalPriceWithPrePayDiscount":"$359.51",
"validity":"01/10/2019"
},
"productServicetList":[
{
"name":"Fertilizer",
"isIncluded":"TRUE",
"description":" Fertilizer Description"
},
{
"name":"Weed Control",
"isIncluded":"TRUE",
"description":" Weed Control Description"
},
{
"name":"Pre-emergent",
"isIncluded":"FALSE",
"description":" Pre-emergent Description"
},
{
"name":"Lime",
"isIncluded":"TRUE",
"description":" Lime Description"
},
{
"name":"Healthy Lawn Analysis",
"isIncluded":"TRUE",
"description":" Healthy Lawn Analysis Description"
}
],
"videoUrl":"",
"cartState":"FALSE"
}
}
],
"mutual_exclusive_nbs_plans":[
],
"quoteId":10
}]
onPress = {this.gotoDetailsPage(item.extension_attributes, index)}
你能提供你的样本数据供快速参考吗？@mahadevkalyansrikanth我已经添加了它。你能检查一下吗。
onPress={() => this.gotoDetailsPage(item.extension_attributes, index)}
onPress = {this.gotoDetailsPage(item.extension_attributes, index)}