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...