标签: react-native-flatlist

我正在使用React Native的新FlatList组件。我使用它来显示水平列表，但是当使用内置列表时，ItemRenderComponent它会在每个项目下面而不是在它们之间显示分隔符。

有办法改变吗？

 interface State {
dataSource: WhosOutByPolicy[];
}

interface Props {
 data: WhosOutByPolicy[];
}

class WhosOutParentCell extends Component<Props, State> {
  constructor(props: Props) {
    super(props);

    this.state = { dataSource: props.data };
}

renderSeparator = () => {
    return (
        <View
            style={{
                height: 100,
                width: 3,
                backgroundColor: "#D81458"
            }}
        />
    );
};

render() {
    return (
        <View style={styles.container}>
            <FlatList
                data={this.state.dataSource}
                horizontal={true}
                renderItem={({ item }) => (
                    <WhosOutUsersInPolicyCell data={item} />
                )}
                keyExtractor={item …

在RN FlatlistDoc单元中，有一个描述：

为了限制内存并实现平滑滚动，内容在屏幕外异步呈现。这意味着滚动速度可能会比填充率快，并会立即看到空白内容。这是可以根据每个应用程序的需求进行调整的折衷方案，我们正在努力在幕后进行改进。

我面临这个问题，有时内容空白。使用Flatlist组件时如何提高填充率？

我正在使用FlatList显示数据列表。我尝试了数十个示例，如何从数据中删除一行，但找不到正确的解决方案。

现在，我要从状态中删除所有数据，但是我只想删除一项。

这是我的HomeScreen，它显示数据列表：

class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: data.products
    };
  }

  static navigationOptions = {
    title: "Products"
  };

  keyExtractor = (item, index) => item.id;

  openDetails = data => {
    this.props.navigation.navigate("Details", {
      data
    });
  };

  deleteItem = data => {
    this.setState({ data: ''})
  }

  renderProduct = ({ item, index }) => {
    return (
      <Item
        itemTitle={item.title}
        openDetails={() => this.openDetails(item)}
        itemUrl={item.imageUrl}
        data={this.state.data}
        deleteItem={() => this.deleteItem(item)}
      />
    );
  };

  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={this.renderProduct} …

描述

从下面的示例代码中，FlatList返回n个TextInput，当在特定的TextInput上输入值时，它将保持每隔一个TextInput的重新呈现。

样例代码

<FlatList
    ...........
    renderItem ={this.renderItem}
/>

renderItem=(item)=>{

   <Text>{item.name}</Text>
   <TextInput
   .........
   onChangeText ={(text)=>this.setState({text})}
   value={this. state.text}
/>

}

解

我试图将一个键分配给TextInput但不知道如何对其进行验证

我想要使用scrollToIndex的功能FlatList上作出反应，本地人。但是，当我切换FlatList到 时createAnimatedComponent(FlatList)，它ref变成了undefined。

有没有办法在我使用时保持FlatList's ？refcreateAnimatedComponent

谢谢你的关心。

我正在使用顶部带有动画FlatList的React Native地图，当我按下地图标记时，我希望列表滚动到该特定索引。但是当我尝试这样做时，我得到了这个错误_this.flatListRef.scrollToIndex is not a function. '_this.flatListRef.scrollToIndex' is undefined

我的代码基础看起来像这样...

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

export default Map extends component {

  scrollToCard = index => {
    this.flatListRef.scrollToIndex({index})
  }

  render() {

    const { allProperties } = this.props;

    <MapView
       ref={map => this.map = map}
       style={styles.map}
       initialRegion={{
          latitude: 35.2271,
          longitude: -80.8431,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.421
          }}
       >

       {allProperties && allProperties.map((property, index) => (
         <Marker
           coordinate={property.coordinates}
           title={property.propertyName}
           pinColor={theme.COLOR_GREEN}
           key={property.id}
           onPress={() => this.scrollToCard(index)}
         />
       ))}

       </MapView>

         {allProperties &&
            <AnimatedFlatList
               ref={ref => {this.flatListRef = ref }} …

我正在用TypeScript构建一个React Native应用程序。renderItem抱怨解构后的项目隐式具有any类型。我用Google搜索，发现了这个问题，并试图实现他们在这里任教，在类型组合index.d.ts中的@types包本机作出反应。

export interface Props {
  emotions: Emotion[];
}

class EmotionsPicker extends PureComponent<Props> {
  keyExtractor = (item, index) => index;
  renderItem = ({ item }) => (
    <ListItem title={item.name} checkmark={item.checked} />
  );

  render() {
    return (
      <FlatList<Emotion>
        keyExtractor={this.keyExtractor}
        renderItem={this.renderItem}
        data={this.props.emotions}
      />
    );
  }
}

不幸的是，这不起作用。我该如何指定商品类型Emotion？

我正在为我的大学校园开发一个社交网络应用程序。我正在使用React Native。现在，我正在使用Redux维护我的应用程序状态，使用React-redux将该状态绑定到各种React组件，使用Redux-thunk进行异步API调用以获取和发布数据。我收到的任何数据，在将其提交到Redux存储之前都会对其进行规范化。我面临的一个主要问题是，每当我开始滚动应用的“ Feed”时，都会收到警告：

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. Object {
  "contentLength": 6298,
  "dt": 4840,
  "prevDt": 7619,
}

我想知道上面对象中的各种键值对实际上意味着什么。同样，这些值应大致等于什么才能获得良好的用户体验。

注意：我FlatList用来渲染提要的各个帖子。

我在单击show-comments后在评论部分中构建照片馈送应用程序project-repo-here，它在设备上显示评论页面，但是在终端中，由于错误而中断，

错误在comments.js文件中。

Warning: Each child in an array or iterator should have a unique "key" prop.%s%s See documentationOfREact/react-warning-keys for more information.%s, 

Check the render method of `VirtualizedList`., , 
    in CellRenderer (at VirtualizedList.js:687)
    in VirtualizedList (at FlatList.js:662)
    in FlatList (at comments.js:212)
    in RCTView (at View.js:44)
    in comments (created by SceneView)
    in SceneView (at StackViewLayout.js:795)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewCard.js:69)
    in RCTView (at View.js:44)
    in AnimatedComponent (at screens.native.js:59)
    in Screen (at StackViewCard.js:57)
    in Card (at createPointerEventsContainer.js:27)
    in …

我正在尝试制作一个自定义组件，如果第一个选择不够明确，它将显示新选择的选项。我正在使用该FlatList组件显示数据，但似乎没有显示作为道具提供的数据。

这是render组件的功能

import { Header, List, ListItem } from "react-native-elements";
import PickerBox from "./PickerBox";

render() {
    return (
      <View>
        <Header
          centerComponent={{
            text: "By " + this.state.newTaxon + ", did you mean...",
            style: { color: "white", fontSize: 20, textAlign: "center" }
          }}
          backgroundColor="black"
        />
        <FlatList
          data = {this.state.dataSource}
          renderItem = {({item}) => {
            <PickerBox
              title = {item.c_syn_name}
            />
          }}
          keyExtractor = {(item) => item.c_syn_name}
        />
      </View>
    );
}

这是PickerBox组件

const styles = StyleSheet.create({
  container: { …