标签: react-native-flatlist

我在 FlatList 中有不同高度（250 或 150）的项目，当迭代每个项目并附加 FlatList 的 dataSrouce 的状态时，一切都渲染得很好，但如果我想避免“附加”影响并将 dataSrouce 设置为 all一次显示项目，似乎 FlatList 有一个奇怪的错误，项目没有达到正确的高度（按钮上有一个空白区域，项目应该填充它）。

尝试将“ flexGrow:1 ”放在FlatList上，尝试“ initialNumToRender ”属性，尝试修复视图中每个项目的高度。

FlatList 的容器是“flex:1”。

我的公寓列表：

  render() {
const _this = this;
const { loading } = this.state;
return (
  <Components.ViewContainer>
    {this.printTopHeader()}
    {loading ? (
      <ActivityIndicator size={25} />
    ) : (
      <FlatList
        style={{ flex: 1 }}
        removeClippedSubviews={true} //tried with and without
        data={this.state.posts}
        extraData={this.state.posts} //tried with and without
        renderItem={({ item }) => (
          <HomeCard
            post={item}
          />
        )}
        keyExtractor={(item, index) => item.key}
      />
    )}
  </Components.ViewContainer>
); …

我有以下与以下项目反应本机的平面列表。

键名类型

现在我还有以下 renderItem 函数，用于渲染平面列表的元素。

 renderItem={({ item }) => (
     <View>
     <View style={styles.navBarLeftButton}>
     <Avatar
     medium
     rounded
     source={{uri:item.name}}
     activeOpacity={0.7}
    onPress={() => console.log(this.state.data)}
    />
  <Text style={styles.textbutton}>{item.type}</Text>
  <Text>{item.description}</Text>
  <Text>{item.request} <Emoji name={item.request} style={{fontSize: 15}} /> 
 <Emoji name="pray" style={{fontSize: 15}} /></Text>
 </View>
 </View>
  )}

我想根据平面列表的项目键渲染不同的渲染函数，我可以使用基于键的本机平面列表进行条件渲染吗？

我正在尝试使我的标签栏具有粘性，我正在使用native base标签栏，而他们正在使用"react-native-scrollable-tab-view". 我用scrollView包裹我的根视图并设置“stickyHeaderIndices={[1]}”，这对于使我的选项卡栏粘在顶部很有用，但是当这些选项卡栏粘在顶部时，滚动在粘到顶部之前停止工作它工作正常，但是当这些选项卡粘在顶部滚动条上时，它会停止工作，有什么建议吗？

我尝试添加另一个滚动视图，这样我的滚动就可以工作，但没有运气，我在选项卡内有 FlatList 组件，但在 StickyHeaderIndices 滚动工作之前，FlatList 的滚动在 StickyHeaderIndices 之后也不起作用。

 <ScrollView
      stickyHeaderIndices={[1]}
      ref={ref => this.scrollView = ref}
      onContentSizeChange={(contentWidth, contentHeight) => {
        _scrollToBottomY = contentHeight
      }}
      contentContainerStyle={{flexGrow: 1, flex: 1}}>
 >  <AnotherComponent/>
    <MyTabsComponent />
</ScrollView>

滚动应该在 StickyHeaderIndices 之后起作用。

我正在寻找可以有多个行和列的组件。其中第一列将是粘性的，其余列将水平和垂直滚动。我已经找到了reactJS使用的解决方案Table，但没有办法使用FlatList. 如果有人有任何想法或可以引导我走向正确的方向。

我尝试过多次ScrollView但没有成功

<ScrollView>
    <ScrollView horizontal>

    </ScrollView>
</ScrollView>

上述解决方案不起作用，因为它没有垂直滚动。如果我为每一行添加滚动，它将不适用于整个FlatList。我需要类似这个例子的东西

我找到了这个参考问题，但它的解决方案是为每一行提供水平滚动视图。

我正在构建一个启用分页的简单水平 React Native FlatList：

<FlatList
   horizontal={true}
   pagingEnabled={true}
   data={...some data...}
   renderItem={({item}) => {...some rendering...}}
   onViewableItemsChanged={(info) => {... handling ...}}
 />

我希望仅在列表中的新页面可见后才能收到回电。我正在寻求的行为是，当用户左右滑动列表时，列表将翻阅项目，并且我希望回调对可见项目触发一次。

可见项目onViewableItemsChanged的每次更改都会调用道具，这不是我想要的，除非我跟踪项目所属的页面。

我正在寻找一种onViewablePageChanged回调类型。

关于如何实现这一目标有什么想法吗？

我正在使用 React Native 库开发 FotoBook 应用程序。当我让用户从设备库中选择图像后，我将它们以水平模式放入 FlatList 组件中。那么如何将选定的图像拖放到屏幕的其他部分

我正在使用 PanResponder 和 Animated API，它可以很好地转换响应者坐标，但是当我尝试超出水平 FlatList 的范围时，它会被隐藏。我尝试将溢出设置为可见并更改 zIndex 但它不起作用

以下是屏幕截图：

这是我的代码：

import React from 'react';
import {
    SafeAreaView,
    View, 
    FlatList, 
    Text,
    StyleSheet,
    Animated,
    PanResponder
} from 'react-native';
import { v4 } from 'uuid';


export default class App extends React.PureComponent{

  state = {
    data: [
      { id: v4(), title: 'Lightcoral', hex: '#eb7474' },
      { id: v4(), title: 'Orchid', hex: '#eb74dc' },
      { id: v4(), title: 'Mediumpurple', hex: '#9a74eb' },
      { id: v4(), title: …

问题：在动态填充的列表中选择输入框时，键盘立即消失。仅当选择页面底部附近的输入框时才会发生。

发生在：Android（适用于 ios）

该应用程序是用 Expo 创建的，我还没有弹出。

目前使用 KeyboardAwareFlatlist，但是如果我将其切换为 FlatList，问题仍然会发生。下面是 TextInput 的代码。如果您需要任何其他代码，请告诉我。

<TextInput
  style={{
  color: 'black',
  backgroundColor: 'white',
  padding: 5,
  fontSize: 16,
  marginBottom: 10,
  }}
  keyboardType={'numeric'}                                       
  returnKeyType='done'
  onChangeText={(text) => this.setDuration(text, index)}
  value={item.duration.toString()}
 />

发行视频：https://www.youtube.com/watch? v=U3Ps_tz4Uxw&feature=youtu.be

我有一个错误本机反应了该错误

将循环结构转换为 JSON -> 从构造函数“FiberNode”的对象开始

使用 API 单击通过 FlatList 显示的数据列表时。

我想知道哪些部分是错误的，哪些部分应该纠正？

这是脚本：

import React, {Component} from 'react';
import { Text, View, StyleSheet, SafeAreaView, Image, TouchableOpacity,ScrollView, ActivityIndicator , FlatList} from 'react-native';
import { createBottomTabNavigator, createAppContainer} from 'react-navigation';
import IconHome from '../components/IconHome';
import {Actions} from 'react-native-router-flux';
import IconLaporan from '../components/IconLaporan';
import IconNews from '../components/IconNews';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import {Fonts} from '../utils/Fonts';
import Wallpaper2 from'../components/Wallpaper2';

export default class NewCases extends Component {

  constructor(props){
    super(props)

    this.state ={
      tokens          : this.props.Tokennya,
      user …

我有一个平面列表，我想以类似网格的方式显示，使用容器的 100% 宽度，但是我似乎无法使用平面列表来实现这一点。
我的空格位于两侧（根据图像），空格周围将容器中的框居中，空格均匀地执行相同的操作，带有 marginRight 的 flex-start 不准确。不完全确定如何实现这一目标？谢谢

<FlatList
    numColumns={3}
    columnWrapperStyle={{ justifyContent: "space-between"}}
    contentContainerStyle={{
       marginTop:20 
    }}
    data={data}
    keyExtractor={item => item.id}
    renderItem={renderItemComponent}
/>

问题： 需要类似时尚之间的空间，但如果行中有 2 个项目，则根据动态数据将第二个项目移动到中间？

我正在努力为我的 React-Native 应用程序创建一个要求，其中我有一个空白的保管箱（在放置平面列表项目时，它应该转换为可拖动的平面列表）和一个可拖动的平面列表，我必须将其拖放到空白处保管箱，反之亦然。

两个平面列表中的项目应该有一个单击的右侧菜单，其中应该显示一个选项，用于将项目移动到另一个平面列表。

我知道这是一个非常常见的场景，但由于我对 React-Native 还很陌生，所以我正在努力获取任何库或自己创建相同的库。

我正在将 React-Native 与 Redux 和 Typescript 结合使用

我正在使用react-native-draggable-flatlist作为Flatlist（https://github.com/computerjazz/react-native-draggable-flatlist），请告诉我是否有更好的选择