React JSX中遍历数组
forEach
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| const dest_hot_element = []
this.state.hot_dest_arr.forEach((val)=>{
dest_hot_element.push(
<Text>{val.districtName}</Text>
)
})
return (
<ViewPort>
<View>
{dest_hot_element}
</View>
</ViewPort>
)
|
JSX style属性
1
2
3
| borderWidth:0.5,
borderStyle:
borderColor:
|
循环内嵌套
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
| render() {
const dest_hot_element = []
// const back_btn = require('../assets/dest_ic_back_black@3x.png')
this.state.hot_dest_arr.forEach((val,idx)=>{
// 标签
if(typeof val.topSightDetail !== 'undefined'){
var topDetail = val.topSightDetail.map((res,idx)=>{
return (
<Text style={ styles.topSightDetail } key={idx}>{res}</Text>
)
})
}
// 所有信息
dest_hot_element.push(
<TouchableOpacity
style={styles.box}
key={idx}
onPress = {() => {
URL.openURL(`/rn_destination_home/main.js?CRNModuleName=rnDestinationHome&CRNType=1&initialPage=CTDestDestinationPage&hideDefaultLoading=true&districtId=${val.districtId}`)
}}
>
{/* 封面图 */}
<Image
style={styles.coverImg}
source = {{uri: val.covImgUrl}}
/>
<View style={styles.rightBox}>
{/* 标题 */}
<Text style={styles.title}>{val.districtName}</Text>
{/* 副标题 */}
<Text style={styles.subTitle}>{val.districtEnName}</Text>
{/* 景点/游记数目 */}
<View style={styles.numDetailBox}>
<Text style={ val.sightNumDetail ? styles.numDetail:{width:0}}>{val.sightNumDetail}</Text>
<Text style={ val.travelNumDetail ? styles.numDetail:{width:0}}>{val.travelNumDetail}</Text>
</View>
{/* 标签 */}
<View style={styles.topSightDetailLine}>
{/* <Text style={ val.topSightDetail ? styles.topSightDetail:{width:0}}>{val.topSightDetail}</Text> */}
{topDetail}
</View>
</View>
</TouchableOpacity>
)
})
return (
<ViewPort>
{/* 状态栏 */}
<StatusBar
backgroundColor='white'
barStyle="dark-content"
/>
<View style={{width:width,height:20}}></View>
{/* NavBar */}
<View style={styles.navBar}>
<TouchableOpacity
style={{width:22,height:22,marginLeft:12}}
onPress={()=>{
console.log('hhhhhhh')
}}
>
<Image
style={{width:null,height:null}}
// source={require('../assets/dest_ic_back_black@3x.png')}
/>
</TouchableOpacity>
<Text
style={styles.titleWords}
>热门目的地</Text>
</View>
{/* 内容 */}
<ScrollView
style={styles.container}
onMomentumScrollEnd = {async ()=>{
if(this.state.has_more){
await this.setState({
pageIndex:this.state.pageIndex+1
})
this._fetchHotDestCatalog()
}
}}
>
{dest_hot_element}
</ScrollView>
</ViewPort>
);
}
|
-
Next Post
ReactNative填坑指南
-
Previous Post
填坑指南及小问题归纳
