Карта массива в ScrollView не отображается

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

Я пытался не использовать пользовательский компонент, тот же результат.Также попытался отрисовать только простой View с заголовком элемента в тексте, но безуспешно ... FlatList работал отлично, почему прокрутка не работает?

Чего мне не хватает ??

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} />
                )
            })
        )
    };