Tab ScrollView 内的 FlatList答案

【问题标题】：FlatList inside Tab ScrollViewTab ScrollView 内的 FlatList
【发布时间】：2019-12-24 00:00:50
【问题描述】：

我正在尝试使用 highScores 的键和值创建一个 FlatList，将它们放在我的 ScrollView 中，但没有呈现...有什么问题？

import React from 'react';
import {
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  View,
  FlatList,
  Row
} from 'react-native';

export default function HomeScreen() {

  const highScores = { '1': 'a', '2': 'b' };

  return (
    <View style={styles.container}>

      <ScrollView
        style={styles.container}
        contentContainerStyle={styles.contentContainer}>

        <View>
          <FlatList
            data={highScores}
            renderItem={
              ({ item, index }) =>
                <Row highScore={item} index={index} key={index} />
            }
          />
        </View>

        );
    }

如您所见，我创建了一个视图来渲染他的项目。我没有收到任何错误，但它不起作用。有人可以帮助我吗？谢谢！

【问题讨论】：

标签： react-native expo react-native-flatlist react-native-navigation

【解决方案1】：

实际上，您的问题缺乏解释。不过，我回答了您面临的相关问题。

首先，Flatlist 也是一个可滚动组件，因此在滚动视图中使用平面列表不会产生逻辑。如果您尝试实现嵌套滚动视图，则可以继续。
其次，代码中没有关闭标签。不完整。
最后，您已将 JSON 对象赋予 Flatlist 数据道具，flatlist 无法迭代该对象。所以你应该给一个数组来使数组中的项目被渲染。

给数据props的正确方式：

const highScores = [
                     { '1': 'a' }, 
                     { '2': 'b' },
                     { '3': 'c' }
                   ];

解决您的问题：

import * as React from 'react';
import { Text, View, StyleSheet, ScrollView, FlatList } from 'react-native';
import Constants from 'expo-constants';

const highScores = [{ '1': 'a'}, {'2': 'b' }];

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
      <ScrollView>
        <View style={{ width: '100%', height: '100%' }}>
          <FlatList
            data={highScores}
            renderItem={({ item, index }) => <Text>{JSON.stringify(item)}</Text>}
          />
        </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

清除？？如果是，请点赞

【讨论】：