我需要在滚动视图中做一个从1到100的循环，但我做不到

Question

这是代码，但我不能像那样写1到100，所以我需要一个循环，但有一些错误我什么都不知道，我不知道如何解决这个问题帮助我度过难关。。。

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

上面的代码正在运行，但是，如果我使用for循环而不是这个"文本"，我会得到错误。

for (let i = 0; i < 100; i++) {
<Text>{i}</Text>

错误在数字"100"上显示：需要标识符。

Answer 1

对于较大的数据集，建议在react native中使用FlatList。通过引入保存数据的state，这相对容易实现。

这里是一个最小的例子。

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是ScrollView的一个方便包装器，在性能方面，它通常是较大数据集的更好选择。

如果您仍然想使用ScrollView，那么您可以按如下方式使用map函数。

const data = useMemo(() => Array(100).fill().map((_, i) => i+1), [])
<ScrollView
style={styles.scroller}>

{
data.map(i => <Text style={styles.welcome}>{i}</Text>)
}
</ScrollView>