时间戳

首页 > 解决方案 > Tab ScrollView 内的 FlatList

react-native - Tab ScrollView 内的 FlatList

问题描述

我正在尝试使用 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-nativeexporeact-native-flatlistreact-native-navigation

解决方案

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

  • 首先，Flatlist 也是一个可滚动的组件，所以在滚动视图中使用 flat list 是不合逻辑的。如果您正在尝试实现嵌套滚动视图，那么您可以继续它。
  • 其次，代码中没有关闭标签。它不完整。
  • 最后，您已将 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,
  },
});

清零了？？如果是，请点赞

推荐阅读