React Native - ListView 滚动到嵌套子引用？

Question

我正在使用 ListView 来显示 comments 的列表，如果评论中存在 subcomments 则可能。我试图通过其 ref 滚动到特定的 subcomment，但我无法使其正常工作。我使用了 3 个组件（在下面归结）来完成这个：

1.评论

import React, { Component } from 'react'
import { TouchableOpacity, ListView, View, Text } from 'react-native'
import CommentRow from './commentRow'

const ds = new ListView.DataSource({ rowHasChanged: ( r1, r2 ) => r1.id !== r2.id });
const commentsDataSource = [
  {id: '1', body: 'comment 1'},{id: '2', body: 'comment 2'},{id: '3', body: 'comment 3'},{id: '4', body: 'comment 4'},{id: '5', body: 'comment 5'},{id: '6', body: 'comment 6'},{id: '7', body: 'comment 7'},{id: '8', body: 'comment 8'},{id: '9', body: 'comment 9'},{id: '10', body: 'comment 10'},
  {id: '11', body: 'comment 11'},{id: '12', body: 'comment 12', hasSubComments: true},{id: '13', body: 'comment 13'},{id: '14', body: 'comment 14'},{id: '15', body: 'comment 15'},{id: '16', body: 'comment 16'},{id: '17', body: 'comment 17'},{id: '18', body: 'comment 18'},{id: '19', body: 'comment 19'},{id: '20', body: 'comment 20'}
];

export default class Comments extends Component {
    constructor(props) {
      super(props);

      this.state = {
        dataSource: ds.cloneWithRows(commentsDataSource)
      };
    }

    scrollToSubCommentRef(ref) {
      this.rowz[ref].measure((ox, oy, width, height, px, py) => {
        const offsetY = oy;
        this.refs.mainListView.scrollTo({ y: offsetY })
      });
    }

    render() {
      return (
        <View>
            <TouchableOpacity style={{backgroundColor: 'red', padding: 50}}
                              onPress={() => this.scrollToSubCommentRef('subComment_10')}>
                <Text>Scroll to subComment_10!</Text>
            </TouchableOpacity>

            <ListView ref="mainListView"
                      renderRow={comment => <CommentRow comment={comment} />}
                      dataSource={this.state.dataSource}
                      enableEmptySections={true} />
        </View>
      )
    }
}

2。评论行

import React, { Component } from 'react';
import { View } from 'react-native'
import CommentListItem from './commentListItem'

export default class CommentRow extends Component {
    render() {
      const comment = this.props.comment;

      return (
        <View key={`comment_${comment.id}`} style={{overflow: 'hidden'}}>
          <CommentListItem comment={comment} />
        </View>
      )
    }
}

3。 CommentListItem

import React, { Component } from 'react'
import { View, Text } from 'react-native'

const subComments = [
  {id: '1', body: 'subcomment 1'},{id: '2', body: 'subcomment 2'},{id: '3', body: 'subcomment 3'},{id: '4', body: 'subcomment 4'},{id: '5', body: 'subcomment 5'},{id: '6', body: 'subcomment 6'},{id: '7', body: 'subcomment 7'},{id: '8', body: 'subcomment 8'},{id: '9', body: 'subcomment 9'},{id: '10', body: 'subcomment 10'},
  {id: '11', body: 'subcomment 11'},{id: '12', body: 'subcomment 12'},{id: '13', body: 'subcomment 13'},{id: '14', body: 'subcomment 14'},{id: '15', body: 'subcomment 15'},{id: '16', body: 'subcomment 16'},{id: '17', body: 'subcomment 17'},{id: '18', body: 'subcomment 18'},{id: '19', body: 'subcomment 19'},{id: '20', body: 'subcomment 20'},
  {id: '21', body: 'subcomment 21'},{id: '22', body: 'subcomment 22'},{id: '23', body: 'subcomment 23'},{id: '24', body: 'subcomment 24'},{id: '25', body: 'subcomment 25'},{id: '26', body: 'subcomment 26'},{id: '27', body: 'subcomment 27'},{id: '28', body: 'subcomment 28'},{id: '29', body: 'subcomment 29'},{id: '30', body: 'subcomment 30'},
  {id: '31', body: 'subcomment 31'},{id: '32', body: 'subcomment 32'},{id: '33', body: 'subcomment 33'},{id: '34', body: 'subcomment 34'},{id: '35', body: 'subcomment 35'},{id: '36', body: 'subcomment 36'},{id: '37', body: 'subcomment 37'},{id: '38', body: 'subcomment 38'},{id: '39', body: 'subcomment 39'},{id: '40', body: 'subcomment 40'},
  {id: '41', body: 'subcomment 41'},{id: '42', body: 'subcomment 42'},{id: '43', body: 'subcomment 43'},{id: '44', body: 'subcomment 44'},{id: '45', body: 'subcomment 45'},{id: '46', body: 'subcomment 46'},{id: '47', body: 'subcomment 47'},{id: '48', body: 'subcomment 48'},{id: '49', body: 'subcomment 49'},{id: '50', body: 'subcomment 50'},
  {id: '51', body: 'subcomment 51'},{id: '52', body: 'subcomment 52'},{id: '53', body: 'subcomment 53'},{id: '54', body: 'subcomment 54'},{id: '55', body: 'subcomment 55'},{id: '56', body: 'subcomment 56'},{id: '57', body: 'subcomment 57'},{id: '58', body: 'subcomment 58'},{id: '59', body: 'subcomment 59'},{id: '60', body: 'subcomment 60'},
  {id: '61', body: 'subcomment 61'},{id: '62', body: 'subcomment 62'},{id: '63', body: 'subcomment 63'},{id: '64', body: 'subcomment 64'},{id: '65', body: 'subcomment 65'},{id: '66', body: 'subcomment 66'},{id: '67', body: 'subcomment 67'},{id: '68', body: 'subcomment 68'},{id: '69', body: 'subcomment 69'},{id: '70', body: 'subcomment 70'}
];

export default class CommentListItem extends Component {
  rowz = []; // to hold subComment refs for scroll access

  subCommentsList = () => {
    return subComments.map((subComment, i) => {
      return (
        <View ref={i => this.rowz["subComment_"+subComment.id] = i} key={"subComment_"+subComment.id}>
          <Text>{subComment.body}</Text>
        </View>
      );
    });
  }

  render() {
    const comment = this.props.comment;

    return (
      <View>
        <Text>{comment.body}</Text>
        {comment.hasSubComments && this.subCommentsList()}
      </View>
    )
  }
}

在父组件 #1 中，我试图通过其 subComment_10 的 ref 滚动到 subComment，但测量给出了一个未定义的错误。我了解 this.rowz 不存在于 #1 中，仅存在于 #3 中 subComments 映射遍历每个 subComment 并将其分配给 rowz数组（我刚刚意识到由于某种原因它没有将 subComment_idhere 分配给 rowz 数组）。

那么我们如何解决 #3 映射中的 ref 分配问题，以便 rowz 数组获得所有子注释的列表 refs 以便我们可以滚动给他们？以及我们如何在 #1 中获得带有 this.scrollToSubCommentRef('subComment_10') 的 TouchableOpacity 以将 mainListView 滚动到 subComment_10？

更新

使用提供的解决方案，ref 成功传递到 rowz 数组，但您会注意到，它不会滚动到 subComment_10，而是滚动到comment 10 的底部。它应该滚动到 subComment_10 的顶部，以便在单击 TouchableHighlight:

时它是最明显的 subComment

Answer 1

好的，我运行您编辑的代码并找出您遗漏的内容。 refz 数组是在 CommentListItem class 中本地创建的，因此您无法从父 classes 访问它。但是，由于您将从父级 class 进行所有导航，将道具数组传递到最底层并填充它，因此会有更好的方法。这样你就不会得到 this.rowz is undefined 错误和运行你的代码如预期的那样。

export default class Comments extends Component {
constructor(props) {
  super(props);
  this.rowz = []
  this.state = {
    dataSource: ds.cloneWithRows(commentsDataSource)
  };
}

scrollToSubCommentRef(ref) {
  this.rowz[ref].measure((ox, oy, width, height, px, py) => {
    const offsetY = oy;
    this.refs.mainListView.scrollTo({ y: offsetY })
  });
}

render() {
  return (
    <View>
        <TouchableOpacity style={{backgroundColor: 'red', padding: 50}}
                          onPress={() => this.scrollToSubCommentRef('subComment_10')}>
            <Text>Scroll to subComment_10!</Text>
        </TouchableOpacity>

        <ListView ref="mainListView"
                  renderRow={comment => <CommentRow refArr={this.rowz} comment={comment} />}
                  dataSource={this.state.dataSource}
                  enableEmptySections={true} />
    </View>
  )
}
}

在Commentsclass中，我们将在构造函数中创建的数组(this.rowz)传递给CommentsRowclass~

<CommentRow refArr={this.rowz} comment={comment} />

在 CommentRow class 中，我们将只传递父级 class、

中的内容

export default class CommentRow extends Component {
    render() {
      const comment = this.props.comment;

      return (
        <View key={`comment_${comment.id}`} style={{overflow: 'hidden'}}>
          <CommentListItem refArr={this.props.refArr} comment={comment} />
        </View>
      )
    }
}

就在这里：

<CommentListItem refArr={this.props.refArr} comment={comment} />

最后，在 CommentListItem class 中，为了填充我们的数组，我们可以简单地调用 this.props.refArr.push()

export default class CommentListItem extends Component {
  rowz = []; // to hold subComment refs for scroll access

  subCommentsList = () => {
    return subComments.map((subComment, i) => {
      return (
        <View ref={i => this.props.refArr["subComment_"+subComment.id] = i} key={"subComment_"+subComment.id}>
          <Text>{subComment.body}</Text>
        </View>
      );
    });
  }

  render() {
    const comment = this.props.comment;

    return (
      <View>
        <Text>{comment.body}</Text>
        {comment.hasSubComments && this.subCommentsList()}
      </View>
    )
  }
}

您可能会在这里看得更清楚：

<View ref={i => this.props.refArr["subComment_"+subComment.id] = i} key={"subComment_"+subComment.id}>

它只需运行秒，并且在按下可触摸时平滑滚动。我跳过了上面片段中的导入部分。

React Native - ListView 滚动到嵌套子引用？

React Native - ListView Scroll To Nested Child Ref?

react-native

react-native-listview