标签: react-native-flatlist

什么是在反应原生中在Flatlist中应用延迟加载的最佳方法.目前在平面列表中有无限滚动.我是React原生的新手,所以我什么都不知道.

目前的行为:

我试图通过拉起视图来更新从服务器获取的列表.当我这样做onRefresh不会开火.

我已经在setState函数的回调中设置了GET请求,但这似乎没有做任何事情.

预期行为:

拉起视图调用onRefresh函数.

码:

...
  constructor(props) {
    super(props);
    this.state = {
      stories: [],
      isFetching: false,
    };
  }
  componentDidMount() { this.fetchData() }
  onRefresh() {
    this.setState({ isFetching: true }, function() { this.fetchData() });
  }
  fetchData() {
    var that = this;
    axios.get('http://192.168.0.13:3000/api/story/get/by/geo')
      .then((res) => {
        that.setState({ stories: res.data, isFetching: false });
        that.props.dispatch(StoryActions.setStories(res.data))
      })
  }
  render() {
    return (
      <ScrollView>
        <FlatList
          onRefresh={() => this.onRefresh()}
          refreshing={this.state.isFetching}
          data={this.state.stories}
          keyExtractor={(item, index) => item.id}
          renderItem={({item}) => (<StoryFeed story={item} id={item.id} /> )}
          />
      </ScrollView>
    )
  }

版本信息 …

我以前在JS中看到过这种语法,我只是好奇它是如何工作的.在FlatList的React Native Docs中,一个示例调用renderItem.this._renderItem如何知道它正在使用哪个单独的列表项？看起来项目正在被破坏,但是从哪个对象？

换句话说:在Flatlist中,进行同样调用的另一种方法可能是:

<FlatList <other props> renderItem={({item}) => (<MyListItem ....) />

renderItem是一些特殊的道具,{item}将永远是destructured arg？

我正在使用ReactNative的新List组件 - FlatList.

即使单元格在屏幕上实际不可见,FlatList似乎也会立即呈现所有项目.

<FlatList data={this.props.items} 
          keyExtractor={(item, index) => generateKey()}
         renderItem={this.renderStrip}/>

 renderItem = ({item}) => { 
   console.warn('rendered!');
   return <View style={{height:200, height: 100}} />
}

根据项目的总数调用设置30个项目并且似乎"呈现"警告.

我认为FlatList类似于Android中RecycleView的工作方式,只有当它在屏幕上可见时才会呈现项目.

我错过了什么吗？它不会降低性能吗？
我希望它只能在它即将展示时呈现一个项目.

所以我试图使用React Native的FlatList renderItem属性,但是发生了一些非常奇怪的事情.

该data属性设置为一个数组,其中包含未定义的元素,但是,在renderItem函数中,它给出了一个错误,指出函数的参数是未定义的,除非我调用参数item.

这是我的代码:

export default class Profile extends React.Component {
    onLearnMore = (user) => {
        this.props.navigation.navigate('UserDetail', user)
    }

    render() {
        return (
            <List>
                <FlatList
                    data={data.users}
                    renderItem={( {item} ) => {
                        console.log(item)
                        return (<ListItem
                            roundAvatar
                            title={`${item.fName} ${item.lName}`}
                            onPress={() => this.onLearnMore(item)}
                        />)
                    }}
                />
            </List>
        )
    }
}

如果我换{item}了{userData},那么userData以后在函数中将是未定义的.有谁知道为什么会这样？

完整的错误是:

FlatList

我的每一个keyExtractor组件都有一个List道具.react-native-elementsfrom FlatList组件中的每个项目都有一个关键道具.

任何人都可以解释这个问题的意义吗？

我有这组组件:

render() {
        return (
            <InstantSearch
                appId="29FLVJV5X9"
                apiKey="f2534ea79a28d8469f4e81d546297d39"
                indexName="prod_conferences"
                style={{ flexGrow: 1 }}>
                <Configure filters={`startDateUnix>${TODAY}`} hitsPerPage={10} />
                <SearchBox />
                <LoadingIndicator />
                <Conferences/>
            </InstantSearch>)
    }

哪里<InstantSearch>很简单<View>

我的会议:

export default connectInfiniteHits(({ hits, hasMore, refine }) => {

  const LoadMoreFooter = connectStateResults(
    ({ searching }) =>
      !searching ? <View style={s.loadMoreButtonContainer}>
        <Divider style={s.loadMoreButtonDivider} />
        <Button transparent color={'#53acfe'} title={'Load more confs...'} onPress={() => refine()} />
      </View> : null
  );

  return (
    <FlatList
      data={hits}
      keyExtractor={(item, index) => item.objectID}
      ListFooterComponent={<LoadMoreFooter />}
      renderItem={({ item }) …

我FlatList在我的聊天应用程序中垂直倒置，它在底部显示最新消息，在顶部显示最旧消息（就像所有其他聊天应用程序一样）
问题是当我想将新消息添加到列表底部时，FlatList自动跳转到底部列表！
我所需要的只是防止在这种情况下滚动

这是我的FlatList：

<FlatList
  inverted
  style={{flex: 1}}
  data={this.state.data}
  keyExtractor={(item, index) => item.id}
  renderItem={this.renderItem}
/>

这是将最新消息添加到列表的代码

const data = [ ...newMessages, ...this.state.data ];
this.setState({ data });

我有一个FlatList组件,每行内部都有一个Input.当我选择输入时,我希望它向上滚动键盘上方.

我的代码:

return (
    <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }} >
    <FlatList
      style={{ flex: 1, backgroundColor: '#fff' }}
      data={ds}
      renderItem={({ item }) => <ListItem data={item} />}
      ListFooterComponent={this.renderButton}
    />
  </KeyboardAvoidingView>
);

在这种情况下,从不加载FlatList.当我flex:1从两个组件中删除时,FlatList正确呈现,但选择一个输入不会使其向上滚动

我希望有一组选项卡，每个选项卡都有FlatList一个ScrollView。这类似于Instagram或Twitter的布局。

我知道，由于仅注册了滚动事件，所以在a FlatList内部有一个问题ScrollView并触发onEndReached 存在一些问题ScrollView？

这导致内部onEndReached在加载时立即被调用，然后又一次又一次地被调用...

如果将ScrollView scrollEnabled设置为false flex: 1，flexGrow: 1则可以使内部FlatList滚动，但不使外部内容滚动……如下所示：

我认为很多人都在为这个问题而苦苦挣扎，我在任何地方都找不到真正明确的解决方案。

我也试图实现react-navigation-collapsible与createMaterialTopTabNavigator创建标签。但是，您不能在整个屏幕上实现“拉动刷新”吗？

任何帮助将非常感激。

更新资料

我也研究了实现：ScrollView中的FlatList不滚动

并且我研究了动态切换scrollEnabled属性（即使它创建了一个重新渲染。此ALMOST可以工作...但是ScrollView高度存在问题，flexGrow: 1并且内部FlatList没有填充空间...

第二次更新

这种零食几乎可以做正确的事... https://snack.expo.io/@satya164/collapsible-header-with-tabview 它react-native-tab-view使用动画折叠标题。如果标头是组件，则它可以在加载时获取数据，但内部列表上将仅具有拉动刷新功能（与Instagram不同）。

相关问题：

onEndReached被无限调用存在一个问题-https: //github.com/facebook/react-native/issues/18887-https : //github.com/facebook/react-native/issues/6002

FlatList无法在ScrollView内部正常工作...- https://github.com/facebook/react-native/issues/12827#issuecomment-320509824

ScrollView内部的平面列表-https: //github.com/facebook/react-native/issues/19971

ScrollView中的FlatList无法滚动-https: //github.com/facebook/react-native/issues/19971

FlatList子对象正在渲染上调用onEndReached- https://github.com/react-native-community/react-native-tab-view/issues/501

React Native嵌套Listview多次触发onEndReached- React Native嵌套ListView多次触发onEndReached

当FlatList包装在ScollView中时，onEndReached无法正常工作。- https://github.com/facebook/react-native/issues/22008

类似Twitter的个人资料布局- 如何创建类似Twitter的个人资料布局？但是我相信答案现在是不正确的。