时间戳

首页 > 解决方案 > 我可以将数组传递给 React Native ScrollView 吗？

react-native - 我可以将数组传递给 React Native ScrollView 吗？

问题描述

我正在尝试使用 React Native 的 ScrollView 创建一个可滚动的视图，代码如下

import React from 'react';
import { Image, ScrollView, Text, StyleSheet, View, Dimensions } from 'react-native';

const styles = StyleSheet.create({
    scrollView: {
        height: '100%',
        width: '100%',
        flexDirection: 'column',
    },
    item: {
        height: '20%',
        width: '100%',
    },
});

const data = [];
for (let i = 0; i < 30; i++) {
    const datum = (
        <View style={styles.item}>
            <Text style={{ fontSize: 30 }}>{i.toString()}</Text>
        </View>
    );
    data.push(datum);
}

const App = () => (
    <ScrollView style={styles.scrollView}>
        {data}
    </ScrollView>
);
export default App;

小吃网址：https ://snack.expo.io/rp6!W!HZm

当我在 Snack 中运行此代码时，似乎无法向下滚动到第二页。我检查了 ScrollView 的官方文档，它正在将 ReactElement 单独传递到视图中。

RN 官方文档：https ://reactnative.dev/docs/using-a-scrollview

这是否意味着我不能将元素数组作为 ScrollView 的子元素传递？我在这里有什么遗漏吗？

标签： react-native

解决方案

使用平面列表：

import React, {Component} from 'react';
import{AsyncStorage, View, ScrollView, FlatList} from 'react-native';
import {Text, List} from 'native-base';

class Notes extends Component {

  constructor(props) {

    super(props);

    this.state = {
      data: []
    }

  }


  render () {

    return (
        <ScrollView>
        <View style={{margin: 5, marginTop: 5}}>     
        <List>
            <FlatList
                data={this.state.data}
                renderItem={({item, index}) =>
                <View style={styles.item}>
                  <Text style={{ fontSize: 30 }}>{item.toString()}</Text>
                </View>       
                }
                keyExtractor={(item, index) => index.toString()}
            />
        </List>

        </View> 
        </ScrollView>
    )
  }




}

export default Notes;

推荐阅读