Este es el código, pero no puedo escribir del 1 al 100 así que necesito un bucle, pero hay algunos errores sobre los que no sé nada. No sé cómo resolver este problema. Ayúdame a superar esto...
<ScrollView vertical={true} style={styles.scroller} showsHorizontalScrollIndicator={true} showsVerticalScrollIndicator={true}> <Text style={styles.welcome}> 1</Text> <Text style={styles.welcome}> 2</Text> <Text style={styles.welcome}> 3</Text> <Text style={styles.welcome}> 4</Text> <Text style={styles.welcome}> 5</Text> <Text style={styles.welcome}> 6</Text> <Text style={styles.welcome}> 7</Text> <Text style={styles.welcome}> 8</Text> <Text style={styles.welcome}> 9</Text> <Text style={styles.welcome}> 10</Text> </ScrollView>El código anterior está funcionando , pero si uso for loop en lugar de este 'Texto', obtengo el error .
for (let i = 0; i < 100; i++) { <Text>{i}</Text>Error en el número '100' dice: Identificador esperado.
Para un conjunto de datos más grande, se recomienda usar FlatList en react-native. Esto se hace de manera relativamente fácil mediante la introducción de un state que contiene los datos.
Aquí hay un ejemplo mínimo.
const FlatListExample = (props) => { // prefill the state with 100 objects const [data, setData] = useState(Array(100).fill().map((_, i) => i+1)) return ( <FlatList data={data} keyExtractor={(item) => item.toString()} renderItem={({item, index}) => { return <Text style={styles.welcome}>{item}</Text> }} /> ) } FlatList es un contenedor conveniente alrededor de ScrollView y, en general, es la mejor opción para conjuntos de datos más grandes en lo que respecta al rendimiento.
Si aún desea usar ScrollView , puede usar la función de map de la siguiente manera.
const data = useMemo(() => Array(100).fill().map((_, i) => i+1), []) <ScrollView style={styles.scroller}> { data.map(i => <Text style={styles.welcome}>{i}</Text>) } </ScrollView>