¡Hoy traté de hacer el diseño como se muestra a continuación! Imagen
Pero al final logré hacerlo hasta en un 50 por ciento. No se pudo colocar el botón más a la derecha al final de la View . Así que mi código hasta ahora -
const data = [ { title: "Introduction\n06:25/17:45", }, { title: "What is Design Thinking\n00:00 / 12:50", }, { title: "What is UX Design?\n00:00/09:32", }, ]; ... const buttonStyle = { flex: 1, alignItems: "center", marginLeft: 15, marginRight: 15, flexDirection: "row", height: 57, borderRadius: 10, backgroundColor: "#fff", marginTop: "5%", shadowColor: "#000", shadowOffset: { width: 0, height: 6, }, shadowOpacity: 0.39, shadowRadius: 8.3, elevation: 13, }; <ScrollView style={{ flex: 1, width: "100%", paddingTop: 20, }} > {data.map((item, index) => { return ( <View style={buttonStyle} key={index}> <Image source={require("./assets/play.png")} style={{ height: 32, width: 32, marginLeft: "5%" }} /> <Text style={{ color: "#b5b3c2", marginLeft: 15, textAlign: "left", }} > {item.title} </Text> <Image source={require("./assets/fail.png")} style={{ height: 32, width: 32, justifyContent: "flex-end", }} /> </View> ); })} </ScrollView> Como puede ver, ¿la imagen más a la derecha no está en el lugar correcto? no se como solucionarlo? ¡Perdón por mi mal inglés! ¡También la página oculta mi parte de mi ScrollView !
justifyContent es similar a "justify justify-content en flexbox estándar. Se utiliza para justificar elementos dentro de un contenedor. Debe usar alignSelf: 'flex-end' o establecer un margen automático en el lado izquierdo del componente <Image /> :
<Image source={require("./assets/fail.png")} style={{ height: 32, width: 32, justifyContent: "flex-end", }} /> Con respecto a la sombra paralela que falta, debe agregar relleno al componente interno de ScrollView usando el atributo contentContainerStyle :
<ScrollView style={{ flex: 1, width: "100%", paddingTop: 20 }} contentContainerStyle={{ paddingBottom: 20 }} > También vale la pena señalar que esto probablemente debería representarse como <FlatList /> , en lugar de como <ScrollView /> .