Untitled
unknown
javascript
4 years ago
12 kB
7
Indexable
return (
<>
{
(loading) ? null :
<ScrollView contentContainerStyle = {{flex: 1, justifyContent: "center", marginTop: StatusBar.currentHeight}}>
<View style = {{flexGrow: 1}}>
<ImageBackground source = {require("../images/beautiful.png")} style = {{backgroundColor: "red", width: "100%", height: "100%", alignSelf: "center"}} resizeMode = "contain">
<View style = {{flexDirection: "row", backgroundColor: "red", padding: 10, justifyContent: "center"}}>
<View style = {{flexDirection: "column"}}>
<Text style = {{fontSize: 18, color: "#484848"}}>perpetual</Text>
<Text style = {{fontSize: 25, color: "#484848"}}>貓狗可以不吃肉嗎？</Text>
<Text style = {{fontSize: 25, color: "#484848"}}>蟋蟀是新出路</Text>
</View>
</View>
<View style = {{flexDirection: "row", backgroundColor: "yellow", justifyContent: "space-between", padding: 5}}>
<View style = {{flexDirection: "column"}}>
<View style = {{flexDirection: "row", backgroundColor: "orange"}}>
<Text style = {{color: "#484848"}}>5 May 2020</Text>
<Text style = {{color: "#484848"}}> | </Text>
<Text style = {{color: "#484848"}}>收聽時間 {duration} 分鐘 </Text>
<Text><Camera width = {15} height = {15} color = {"#484848"}/> </Text>
<Text><Sound width = {15} height = {15} color = {"#484848"}/></Text>
</View>
</View>
<View style = {{flexDirection: "column", width: "25%"}}>
<View style = {{flexDirection: "row", backgroundColor: "green", justifyContent: "space-evenly"}}>
<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 style = {{flexDirection: "row", width: "100%", height: "30%", backgroundColor: "orange", padding: 5}}>
<Image source = {require("../images/cat.jpg")} style = {{width: "100%", height: "100%"}} resizeMode = "cover"></Image>
</View>
<View style = {{flexDirection: "row", backgroundColor: "green", justifyContent: "center", justifyContent: "space-evenly"}}>
<Text style = {{alignSelf: "center"}}>
<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", alignSelf: "center"}}>{duration}</Text>
</View>
<View style = {{backgroundColor: "yellow", padding: 5, height: "26%"}}>
<ScrollView contentContainerStyle = {{justifyContent: "center"}}>
{
songList.map((song, index) => {
return (
<>
{
(index == 0) ?
<TouchableOpacity key = {song.id}>
<View style = {{flexDirection: "row"}}>
<Points direction = {"horizontal"} color = {"#9b9a9a"} fill_time = {8}/>
</View>
<View style = {{flexDirection: "row", alignItems: "center", padding: 10}}>
<Text style = {{fontSize: 18, color: "#484848"}}>{song.duration}</Text>
<Text style = {{fontSize: 11, marginLeft: 10, color: "#484848"}}>{song.title}</Text>
</View>
<View style = {{flexDirection: "row"}}>
<Points direction = {"horizontal"} color = {"#9b9a9a"} fill_time = {8}/>
</View>
</TouchableOpacity>
:
<TouchableOpacity key = {song.id}>
<View style = {{flexDirection: "row", alignItems: "center", padding: 10}}>
<Text style = {{fontSize: 18, color: "#484848"}}>{song.duration}</Text>
<Text style = {{fontSize: 11, marginLeft: 10, color: "#484848"}}>{song.title}</Text>
</View>
<View style = {{flexDirection: "row"}}>
<Points direction = {"horizontal"} color = {"#9b9a9a"} fill_time = {8}/>
</View>
</TouchableOpacity>
}
</>
)
})
}
</ScrollView>
</View>
<View style = {{flexDirection: "row", backgroundColor: "orange", justifyContent: "center", padding: 15}}>
<TouchableOpacity
style = {{
width: "35%",
alignSelf: "center",
alignItems: "center",
borderRadius: 60,
backgroundColor: "rgba(255, 255, 255, 0.6)",
padding: 10
}}>
<Text style = {{fontSize: 11, color: "#484848"}}>詳細內容</Text>
</TouchableOpacity>
</View>
<View style = {styles.extrasTextContainer}>
<Text style = {{fontSize: 13, color: "#484848"}}>更多Audio</Text>
<Points direction = {"horizontal"} color = {"#C4C4C4"} fill_time = {8}/>
</View>
<View style = {{flexDirection: "row", justifyContent: "space-around", alignItems: "center"}}>
<TouchableOpacity onPress = {move_cassettes_left}>
<Left width = {40} height = {40}></Left>
</TouchableOpacity>
<Carousel
layout = {"default"}
sliderWidth = {200}
itemWidth={500}
data = {carousel_items}
renderItem={carousel_images}
enableSnap = {false}
ref = {scrollCassettes}
style = {{flex: 1}}
/>
<TouchableOpacity onPress = {move_cassettes_right}>
<Right width = {40} height = {40}></Right>
</TouchableOpacity>
</View>
<View style = {{flexDirection: "row", justifyContent: "space-around", alignItems: "center"}}>
<TouchableOpacity onPress = {move_cassettes_left}>
<Left width = {40} height = {40}></Left>
</TouchableOpacity>
<Carousel
layout = {"default"}
sliderWidth = {200}
itemWidth={500}
data = {carousel_items}
renderItem={carousel_images}
enableSnap = {false}
ref = {scrollCassettes}
style = {{flex: 1}}
/>
<TouchableOpacity onPress = {move_cassettes_right}>
<Right width = {40} height = {40}></Right>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</ScrollView>
}
</>
)
}
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
},
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 ArtistSectionTest;Editor is loading...