Tengo un ScrollView creado para deslizar imágenes y representar puntos de datos en cada imagen. Me estoy enfrentando a un desafío al renderizar ButtonRow en cada imagen. Actualmente solo se renderiza en 1 imagen, no en cada imagen individual.

Hasta ahora he intentado lo siguiente:

• Componente de llamada dentro de la función, ver más abajo. Esto solo representa ButtonRow en 1 imagen, no en cada imagen
• Insertar ButtonRow como un punto de datos dentro de la matriz. Esto no funciona en absoluto, tal vez porque mi sintaxis era incorrecta

Imagen:

 export default function DetailsScreen() { const [ property, setProperty ] = useState([ { caption: 'blah', username: 'jane doe', photo: require('../assets/1.jpg'), key: 1 }, { caption: 'caption', username: 'john doe', photo: require('../assets/2.png'), key: 2 }, ]) return ( <View> {property.map((item) => { return ( <> <View style={{ height: 812 }} key={item.key}> <View style={{ flexDirection: 'row', bottom: 220 }}> <ButtonRow /> </View> <Image style={{ justifyContent: 'center', alignSelf: 'center', resizeMode: 'contain' }} source={item.photo} /> <Text style={{ color: 'white', position: 'absolute', bottom: 150 }}>{item.username}</Text> <View style={{ flexDirection: 'row', position: 'absolute', bottom: 120 }}> <Caption style={{ color: 'white', position: 'absolute', bottom: 120 }} address={item.caption} /> </View> </View> </> ) })} </View> ); }

Aplicación.js

 export default function App() { return ( <View style={{ flex: 1, backgroundColor: 'pink' }}> <ScrollView snapToInterval='800px' decelerationRate="fast" > <DetailsScreen /> </ScrollView> </View> ) }