标签: react-native-flatlist

嘿，我是反应原生的新手。我陷入了平面列表和滚动视图中。这是我的代码的结构：

<View>
    <ScollView>
        <View>
            <SafeAreaView>
                <FlatList/> -- Horizontal Scroll --
            </SafeAreaView>
        </View>
        <View>
        </View>
        <View>
            <FlatList/> -- Horizontal Scroll --
        </View>
        <View>
            <FlatList/> -- Horizontal Scroll -- //Issue        
        </View>
    </ScollView>
</View>

所以上面提到的问题平面列表就像//Issue。问题是，当我添加需要以垂直格式滚动的平面列表时，它不会滚动，并且该平面列表还显示在屏幕中间，因此要开始工作，我添加了高度并开始工作，但功能我想要的是当我滚动时屏幕应该向下移动。因此，我按照上面的结构添加了scrollView，但是当我添加scrollView时，我删除了它的高度，它开始完美工作，但显示该错误：

VirtualizedList 永远不应该嵌套在具有相同方向的普通 ScrollView 中，因为它可能会破坏窗口和其他功能 - 请改用另一个 VirtualizedList 支持的容器。

所以为了解决这个问题我尝试：

1. 嵌套滚动启用={true}
2. 滚动启用
3. 给出高度
4. 当我开始开发这个应用程序时，我也遇到同样的问题，然后我使用 ListHeaderComponent 和 ListFooterComponent 得到解决方案。但现在我已经在页眉和页脚组件中编写了代码。

但我无法解决。如果有人有一些想法，请分享。我会很感激你的青睐

我需要显示一个数组，并且由于方向问题，我需要使用 array.map 而不是 Flatlist 来渲染它。

在 Flatlist 中，我可以轻松地使用它，numColumns = {2}但我确实需要使用 array.map 而不是 Flatlist 来做到这一点，我可以渲染数组以仅显示一列，这就是我的制作方法：

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {ScrollView} from 'react-native-gesture-handler';

const data = [
  {
    id: 1,
    name: 'Ronaldo',
  },
  {
    id: 2,
    name: 'Ronaldo',
  },
  {
    id: 3,
    name: 'Ronaldo',
  },
  {
    id: 4,
    name: 'Ronaldo',
  },
  {
    id: 5,
    name: 'Ronaldo',
  },
];

const Card = ({id, name}: any) => {
  return (
    <View style={styles.card}>
      <Text>{id}</Text>
      <Text>{name}</Text>
    </View> …

我花了两天时间解决这个问题，问题是：

当我将 TextInput 放入 Flatlist 中时，TextInput 的行为发生了变化，键盘在写入每个字符后失去焦点。

版本React-native：0.63.2，react：16.13.1，react-dom：16.13.1，expo：~42.0.1，

重现步骤

• 我创建了一个名为 ==> [inputSearch, setInputSearch] 的状态变量
• 我在 Flatlist 的 ListHeaderComponent 中编写了一个文本输入

---> 问题是：在键盘中按下每个字符后，键盘隐藏

国家声明：

const [inputSearch, setInputSearch] = useState(null);

TextInput 位于 Flatlist 内：

    <View style={styles.container}>
    <StatusBar
         backgroundColor="#11131B"
         barStyle="light-content"
    />

    <View style={{width: '100%', flex: 1 , backgroundColor: 'white', marginTop: 5}}>

        <FlatList 
            contentContainerStyle={{alignItems: 'center',paddingHorizontal: 20}}
            keyExtractor={(item) => (Object.keys(item).length === 0) ? "" : item.id.toString()}
            width= {width}
            numColumns={2}
            ListHeaderComponent={() =>
                <View  style={{flexDirection:'column',justifyContent:'space-between'}}>

                   <Text style={{color:Colors.dark1, fontSize:14, marginBottom: 5}}>Search :</Text>
                   <TextInput style={styles.input} value={inputSearch} onChangeText={setInputSearch} placeholder="Username"/>

                </View> …

我在用gorhom/react-native-bottom-sheet

我面临的问题：

我有一个FlatListinside a BottomSheet，我可以FlaLlist在 ios 上滚动，但在 android 上不起作用。

我试图调用onEndReachedFlatList 的函数,但它不起作用.

我在最后打电话给this.state.pageNo它,但它没有更新.我想稍后在无限滚动中使用这个逻辑,但现在无法使它工作.

 import React, { Component } from "react";
 import {
  View,
  Text,
  StyleSheet,
  Button,
  TouchableOpacity,
  FlatList,
  Alert
  } from "react-native";

 class InfiniteScrollRedux extends Component {
   constructor(props) {
      super(props);
      this.state = {
        loading: false,
        pageNo: 1,
        data: [
            { id: 1, name: "Name01" },
            { id: 2, name: "Name02" },
            { id: 3, name: "Name03" },
            { id: 4, name: "Name04" },
            { id: 5, name: "Name05" },
            { id: 6, name: "Name06" }
        ] …

问题

我在react native中使用一个平面列表，并且想与平面列表中的变量进行比较，如果两个变量相等则呈现文本组件，但如果不相等则不呈现文本组件。我尝试了许多方法来执行此操作，但是它们没有任何效果。我很乐意为您找出解决方法！谢谢。

错误：始终违反：VirtualizedList包含一个单元格，该单元格本身包含多个与父级列表方向相同的VirtualizedList。您必须将唯一的listKey属性传递给每个同级列表。

因此，我正在尝试制作一个FlatList，其中将具有多个嵌套FlatList，例如：

1------FlaList Level 0
    1.1-----FlatList Level 1
    1.2-----FlatList Level 1
         1.2.1------ FlatList Level 2
         1.2.2------ FlatList Level 2
2------FlatList Level 0
    2.1-----FlatList Level 1
    2.2-----FlatList Level 1
            2.2.1------ FlatList Level 2
            2.2.2------ FlatList Level 2

为此的代码段：

       {/* Flat List Level 0 ---------------------------------------------------- */}

          <FlatList
            style={{ flex: 1, marginVertical: 8 }}
            data={this.state.meeting_topic_list}
            renderItem={({ item, index }) => (
              <View style={{ flex: 1, marginLeft: 8 }}>
                <Text style={{ fontSize: 12, color: "black", fontWeight: "600", marginBottom: 8 }}>{index + 1} {item.title}</Text>
                 {/* …

我想用React Native的FlatiList渲染对象，但是这个组件不会返回预期的结果。我的字典是这样的：

Object {
  "Lisa.Sky": Object {
    "name": "Lisa",
    "surname": "Sky",
    "age": 21,
    "sex": female
  },  
  "Thomas.Prat": Object {
    "name": "Thomas",
    "surname": "Prat",
    "age": 33,
    "sex": male
  },  
  "Paul.Sing": Object {
    "name": "Paul",
    "surname": "Sing",
    "age": 88,
    "sex": male
  },
  "Andrew.Brown": Object {
    "name": "Andrew",
    "surname": "Brown",
    "age": 23,
    "sex": male
  },
}

我已经实现了这样的FlatList，但是我有白屏

   <View>
       <ScrollView>
           <FlatList
                data={this.props.nameList}
                renderItem={({item}) => 
                    <View key={item.name + "." + item.surname}>  
                        <Text style={styles.viewDetail}>{item.name}</Text>
                        <Text style={styles.viewDetail}>{item.surname}</Text>
                        <Text style={styles.viewDetail}>{item.age}</Text>
                        <Text style={styles.viewDetail}>{item.sex}</Text>
                    </View>
                }
                keyExtractor={(index) => index.toString()}
           /> …

我想FlatList在页面底部呈现页脚，即使没有足够的内容来填充整个屏幕。

我有一种情况，我需要在FlatList extraData中同时传递State和Props。

我尝试了类似的方法，但是没有用。

 <FlatList
      numColumns={1}
      data={this.props.artists}
      renderItem={this.renderArtistItem}
      initialNumToRender={15}
      keyExtractor={item => item.id}
      extraData={(this.state, this.props.league)}
    />

怎么做？