Question

出于设计和交互目的，我试图将正常工作的FlatList替换为基本的ScrollView。但是，即使遵循工作示例，我也无法显示列表！

该应用程序可以编译，没有错误，没有警告，但没有列表。

我的代码：

import React from 'react';
import {
  View,
  ScrollView
} from 'react-native';
import styles from '../../shared-styles/styles.js';
import RecordComponent from './components/record-component.js';

export default class RecordsScreen extends React.Component {

  _renderListItems() {
    const dataStub = [{
        title: 'Hello',
        text: 'My first item',
        value: '110 Kg',
        key: '0'
      },
      {
        title: 'Hello',
        text: 'My first item',
        value: '110 Kg',
        key: '1'
      },
      {
        title: 'Hello',
        text: 'My first item',
        value: '110 Kg',
        key: '2'
      },
      {
        title: 'Hello',
        text: 'My first item',
        value: '110 Kg',
        key: '3'
      },
      {
        title: 'Hello',
        text: 'My first item',
        value: '110 Kg',
        key: '4'
      },
      {
        title: 'Hello',
        text: 'My first item',
        value: '110 Kg',
        key: '5'
      },
      {
        title: 'Hello',
        text: 'My first item',
        value: '110 Kg',
        key: '6'
      },
      {
        title: 'Hello',
        text: 'My first item',
        value: '110 Kg',
        key: '7'
      },
      {
        title: 'Hello',
        text: 'My first item',
        value: '110 Kg',
        key: '8'
      },
      {
        title: 'Hello',
        text: 'My first item',
        value: '110 Kg',
        key: '91'
      },
    ];

    return (
      dataStub.map(item => { <
        RecordComponent record = {
          item
        }
        />
      })
    )
  };

  render() {

    return ( <
      View style = {
        styles.container
      } >
      <
      ScrollView >
      // Nothing happens
      {
        this._renderListItems()
      } <
      /ScrollView> <
      /View>
    );
  }
}

我的RecordComponent：

export default class RecordComponent extends React.Component {
    render() {
        return (
        <View key={this.props.record.key} style={[styles.recordContainer, {paddingTop: this.props.style}]}>
            <View>
                <Text style={styles.recordTitle}>{this.props.record.title}</Text>
                <Text style={styles.recordText}>{this.props.record.text}</Text>
            </View>
            <Text style={styles.recordValue}>{this.props.record.value}</Text>
        </View>
        );
    }
}

我的风格：

container: {
        flex: 1,
        backgroundColor: '#212121',
        marginBottom: -8
    },
recordContainer: {
        justifyContent: 'space-between',
        width: '100%',
        padding: 16,
        flexDirection: 'row'
    },
    recordTitle: {
        fontWeight: '500',
        color: '#ffffff'
    },
    recordText: {
        fontWeight: '400',
        color: '#ffffff',
        opacity: .5
    },
    recordValue: {
        fontWeight: 'bold',
        color: '#EEFF41',
        fontSize: 24,
        alignSelf: 'center'
    },

我正在按照相同的方法将列表呈现为https://snack.expo.io/BJYG3iFFZ

我尝试不使用自定义组件，结果相同。还尝试仅渲染带有文本标题的简单视图，但没有成功... FlatList运行得很好，为什么scrollview不起作用？

我想念什么？

Answer 1

好吧，没关系！

我的地图方法缺少回报，就像这样：

_renderListItems() {
        const dataStub = [
            {title: 'Hello', text: 'My first item', value: '110 Kg', key: '0'},
            {title: 'Hello', text: 'My first item', value: '110 Kg', key: '1'},
            {title: 'Hello', text: 'My first item', value: '110 Kg', key: '2'},
            {title: 'Hello', text: 'My first item', value: '110 Kg', key: '3'},
            {title: 'Hello', text: 'My first item', value: '110 Kg', key: '4'},
            {title: 'Hello', text: 'My first item', value: '110 Kg', key: '5'},
            {title: 'Hello', text: 'My first item', value: '110 Kg', key: '6'},
            {title: 'Hello', text: 'My first item', value: '110 Kg', key: '7'},
            {title: 'Hello', text: 'My first item', value: '110 Kg', key: '8'},
            {title: 'Hello', text: 'My first item', value: '110 Kg', key: '91'},
        ];

        return (
            dataStub.map((item, index) => {
                // missed this bad boy !
                return (
                    <RecordComponent key={index} record={item} />
                )
            })
        )
    };

ScrollView中的数组映射未呈现

1 个答案: