Question

我正在尝试使用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>

        );
    }

如您所见，我已经创建了一个View来渲染他的项目。我没有收到任何错误，但没有用。有人可以帮我吗？谢谢！

Answer 1

实际上，您的问题缺少解释。不过，我会回答您面临的相对问题。

首先，Flatlist也是可滚动的组件，因此在滚动视图中使用不产生逻辑的平面列表。如果您要实现嵌套滚动视图，则可以继续进行。
第二，代码中没有标签被关闭。还不完整。
最后，您已将JSON对象提供给Flatlist数据道具，flatlist无法迭代该对象。因此，您应该给一个数组以使数组中的项得以呈现。

提供数据道具的正确方法：

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

已清除??如果是，请投票

Tab ScrollView内部的FlatList

1 个答案: