Question

目前我正在使用<ScrollView />组件来处理我的项目的滚动，因为我最多只有三个项目，我认为这是合适的，而不是引入<FlatList />。该组件接收名为collapsed和onCollapseToggle的道具，用于修改传递给孩子的折叠道具。我还试验了孩子在状态中使用collapsed变量，但似乎从父母那里修改孩子的状态几乎是不可能的。

当组件向上传递时滚动<ScrollView />（用户向下滚动到足以使组件不再显示在屏幕上）我想执行一个可能会更改{{1传递给正在呈现的项目的值。这样，如果用户扩展项目以查看关于它的更多信息，然后继续向下滚动collapsed该项目将自动折叠，而无需用户通过某种形式的输入手动关闭它。

我目前还不确定是否有任何方法可以解决这个问题，我们将非常感谢任何帮助。我将提供一个我正在使用的结构的示例，这可能有助于某人提出解决方案。我不介意重组我的组件。

<ScrollView />

所以基本上，正如您所看到的，我只需要弄清楚class ContentInformation extends React.Component { state = { content: [ ... ] }; onCollapseToggle = (index, displayed=true) => { const { content } = this.state; const arr = content.slice(); const item = arr[index]; if(!item) return; if(!displayed) { if(!item.collapsed) { item.collapsed = true; } } else { item.collapsed = !item.collapsed; } arr[index] = item; this.setState({ content: arr }); } render() { return ( <ScrollView> { this.state.content.map((content, index) => ( <Item key={content._id} index={index} onCollapseToggle={this.onCollapseToggle} {...content} /> ); } </ScrollView> ); } }何时离屏，这样我就可以调用<Item />来自动重新折叠组件，如果它是打开。

Answer 1

对我来说，你需要一个FlatList或一个ListView，而ScrollView根本不支持这个用例。

提示位于ScrollView说明中：

FlatList is also handy if you want ... any number of other features it supports out of the box.

Answer 2

这是一个如何在滚动时检测项目何时在屏幕外的示例。

state = { toggleDistance: 0 }    

_handleScroll({nativeEvent: {contentOffset: {y}}}) {
    const {toggleDistance} = this.state;
    if (y >= toggleDistance) {
        // The item is offscreen
    }
}

render() {
    <ScrollView
      onScroll={this._handleScroll.bind(this)}>
      <Item 
        onLayout={({nativeEvent: {layout: {y, height}}}) => this.setState({toggleDistance: (y + height)})}/>
      ...
    </ScrollView>
}

在反应原生的ScrollView

2 个答案: