Untitled
unknown
javascript
3 years ago
14 kB
2
Indexable
return (
<>
{
(loading) ? null :
<SafeAreaView style = {{flex: 1, backgroundColor: "red"}}>
<ScrollView style = {{flex: 1}} contentContainerStyle = {{alignItems: "center", justifyContent: "center", flex: 1, backgroundColor: "yellow", flexGrow: 1, flexWrap: "wrap"}}>
<View style = {{flex: 1, flexGrow: 1, flexWrap: "wrap"}}>
<ImageBackground source = {require("../images/beautiful.png")} style = {{width: "100%", height: "100%", flex: 1}} blurRadius = {30} resizeMode = "contain" imageStyle = {{opacity: 0.5}}>
<View style = {styles.songInfo}>
<View style = {styles.imageTitleIconContainer}>
<View style = {styles.titleContainer}>
<View style = {{flexDirection: "row"}}>
<View style = {{flexDirection: "column"}}>
<Text style = {{paddingLeft: 5, fontSize: 18, color: "#484848"}}>{song.title}</Text>
<Text style = {{paddingLeft: 5, fontSize: 25, color: "#484848"}}>貓狗可以不吃肉嗎?</Text>
<Text style = {{paddingLeft: 5, fontSize: 25, color: "#484848"}}>蟋蟀是新出路</Text>
</View>
</View>
</View>
<View style = {{flexDirection: "column"}}>
<Feather name = "x" size = {20} color = "gray" />
</View>
</View>
<View style = {styles.smallDetaisContainer}>
<View style = {{flexDirection: "column"}}>
<View style = {{flexDirection: "row"}}>
<Text style = {{color: "#484848"}}>5 May 2020</Text>
<Text style = {{color: "#484848"}}> | </Text>
<Text style = {{color: "#484848"}}>收聽時間 {duration} 分鐘 </Text>
<Text style = {{marginTop: 2}}><Camera width = {15} height = {15} color = {"#484848"}/> </Text>
<Text style = {{marginTop: 2}}><Sound width = {15} height = {15} color = {"#484848"}/></Text>
</View>
</View>
<View style = {{flexDirection: "column"}}>
<View style = {{flexDirection: "row"}}>
<Up width = {15} height = {15}/>
<Text style = {{color: "#484848"}}>762</Text>
<Down width = {20} height = {20}/>
<Text><Feather name = "bookmark" size = {18} color = "#484848"/> </Text>
</View>
</View>
</View>
</View>
<View style = {styles.songDetails}>
<View style = {styles.songImageContainer}>
<Image source = {require("../images/cat.jpg")} style = {{width: "100%", height: "100%"}} resizeMode = "cover"></Image>
</View>
<View style = {{width: "100%", flexDirection: "row", justifyContent: "space-around", alignItems: "center", padding: 5, marginTop: -13}}>
<Text><FontAwesome5 name = {icon} size = {25} color = "#818181" onPress = {play_music}/></Text>
<Slider
trackStyle = {{width: 300, height: 15, backgroundColor: "#B3B3B3", borderRadius: 10}}
minimumValue = {0}
maximumValue = {1}
value = {current_time}
minimumTrackTintColor = {"#20D88A"}
maximumTrackTintColor = {"#B3B3B3"}
onSlidingComplete = {() => console.log("complete")}
thumbStyle = {{backgroundColor: "transparent"}}
>
</Slider>
<Text style = {{fontSize: 18, color: "#484848"}}>{duration}</Text>
</View>
<View style = {{paddingLeft: 10, paddingRight: 10}}>
<ScrollView>
{
songList.map((song, index) => {
return (
<>
{
(index == 0) ?
<TouchableOpacity key = {song.id}>
<View style = {{flexDirection: "row"}}>
<Points direction = {"horizontal"} color = {"#9b9a9a"} fill_time = {6}/>
</View>
<View style = {{flexDirection: "row", alignItems: "center", padding: 8}}>
<Text style = {{fontSize: 11, color: "#484848"}}>{song.duration}</Text>
<Text style = {{fontSize: 18, marginLeft: 10, color: "#484848"}}>{song.title} </Text>
</View>
<View style = {{flexDirection: "row"}}>
<Points direction = {"horizontal"} color = {"#9b9a9a"} fill_time = {6}/>
</View>
</TouchableOpacity>
:
<TouchableOpacity key = {song.id}>
<View style = {{flexDirection: "row", alignItems: "center", padding: 8}}>
<Text style = {{fontSize: 11, color: "#484848"}}>{song.duration}</Text>
<Text style = {{fontSize: 18, marginLeft: 10, color: "#484848"}}>{song.title}</Text>
</View>
<View style = {{flexDirection: "row"}}>
<Points direction = {"horizontal"} color = {"#9b9a9a"} fill_time = {6}/>
</View>
</TouchableOpacity>
}
</>
)
})
}
</ScrollView>
</View>
<TouchableOpacity style = {styles.detailsButton}>
<Text style = {{fontSize: 11}}>詳細內容</Text>
</TouchableOpacity>
<View style = {styles.extrasTextContainer}>
<Text style = {{fontSize: 13, color: "#484848"}}>更多Audio</Text>
<Points direction = {"horizontal"} color = {"#C4C4C4"} fill_time = {6}/>
</View>
<View style = {{flexDirection: "row", justifyContent: "center"}}>
<View style = {{flexDirection: "column", justifyContent: "center"}}>
<TouchableOpacity onPress = {move_cassettes_left}>
<Left width = {40} height = {40}></Left>
</TouchableOpacity>
</View>
<Carousel
layout = {"default"}
sliderWidth = {200}
itemWidth={500}
data = {carousel_items}
renderItem={carousel_images}
enableSnap = {false}
ref = {scrollCassettes}
style = {{flex: 1}}
/>
<View style = {{flexDirection: "column", justifyContent: "center"}}>
<TouchableOpacity onPress = {move_cassettes_right}>
<Right width = {40} height = {40}></Right>
</TouchableOpacity>
</View>
</View>
<View style = {styles.extrasTextContainer}>
<Text style = {{fontSize: 13, color: "#484848"}}>開聽更多其他文章</Text>
<Points direction = {"horizontal"} color = {"#C4C4C4"} fill_time = {5}/>
</View>
<View style = {styles.extrasContainer}>
<ScrollView horizontal = {true}>
{
extras.map((extra) => {
return (
<View style = {styles.extrasContentContainer} key = {extra.id}>
<ImageBackground source = {require("../images/nano.jpeg")} style = {{width: "100%", height: "100%"}}
resizeMode = "cover" imageStyle = {{opacity: 0.8, borderRadius: 5}}>
<View style = {{flexDirection: "row", justifyContent: "space-between", marginTop: 2, paddingLeft: 2, paddingRight: 2, width: "100%", maxWidth: "100%"}}>
<Text style = {{fontSize: 9, color: "white"}}>{extra.date}</Text>
<Text style = {{fontSize: 9, color: "white"}}>收聽時間 {extra.duration} 分鐘</Text>
</View>
<View style = {{flexDirection: "row"}}>
<Camera width = {16} height = {16} left = {3}/>
<Sound width = {16} height = {16} left = {3}/>
</View>
<View style = {{flexDirection: "row", height: "70%", paddingLeft: 2, paddingRight: 2}}>
<View style = {{flexDirection: "column", justifyContent: "flex-end"}}>
<Text style = {{color: "white"}}>{extra.title}</Text>
<Text style = {{color: "white"}}>{extra.content}</Text>
</View>
</View>
<View style = {{flexDirection: "row", justifyContent: "flex-end", backgroundColor: "black", borderBottomRightRadius: 5, borderBottomLeftRadius: 5}}>
<Up width = {15} height = {15}/>
<Text style = {{color: "white"}}>762</Text>
<Down width = {20} height = {20}/>
<Text><Feather name = "bookmark" size = {18} color = "white"/> </Text>
</View>
</ImageBackground>
</View>
)
})
}
</ScrollView>
</View>
</View>
</ImageBackground>
</View>
</ScrollView>
</SafeAreaView>
}
</>
)
}
const styles = StyleSheet.create({
container: {
},
songInfo: {
height: Dimensions.get("window").height * 0.15,
padding: 10,
},
imageTitleIconContainer: {
justifyContent: "space-between",
flexDirection: "row",
justifyContent: "center",
alignSelf: "center",
padding: 5,
marginTop: -10
},
imageContainer: {
flexDirection: "column",
height: "60%",
backgroundColor: "yellow",
},
titleContainer: {
flexDirection: "column",
width: Dimensions.get("window").width * 0.8,
maxWidth: Dimensions.get("window").width * 0.8
},
smallDetaisContainer: {
flexDirection: "row",
justifyContent: "space-between",
padding: 5,
marginTop: -8
},
songDetails: {
height: Dimensions.get("window").height * 0.50,
paddingTop: 0,
marginTop: -20
},
songImageContainer: {
height: "65%",
width: "100%",
padding: 15,
marginTop: -8
},
detailsButton: {
width: "35%",
alignSelf: "center",
alignItems: "center",
borderRadius: 20,
backgroundColor: "rgba(255, 255, 255, 0.6)",
padding: 15
},
cassettesContainer: {
flexDirection: "row",
justifyContent: "space-between",
},
extrasTextContainer: {
flexDirection: "row",
padding: 5,
width: Dimensions.get("window").width,
maxWidth: Dimensions.get("window").width
},
extrasContainer: {
flexDirection: "row",
width: Dimensions.get("window").width,
maxWidth: Dimensions.get("window").width,
},
extrasContentContainer:{
flexDirection: "column",
width: Dimensions.get("window").width * 0.3,
margin: 5,
marginTop: 0
}
});
export default ArtistSection;Editor is loading...