Question

我在ListView上有一个ref row，我希望能够通过其row滚动到特定的ref这样的TouchableOpacity：

<TouchableOpacity style={styles.button}
                  onPress={() => this.scrollToRef('item_5')}>
    <Text style={styles.text}>Scroll to row of ref item_5!</Text>
</TouchableOpacity>

<ListView
     ref="listView"
     renderRow={ item => {
               return (
               <View ref={"item_"+item.id} key={"item_"+item.id} style={styles.itemRow}>
                 <Text>ref is {"item_"+item.id}</Text>
                 <Text>{item.text}</Text>
               </View>
               )
               }}
     dataSource={this.state.dataSource}
     enableEmptySections={true}
/>

按下TouchableOpacity不会滚动到ref="item_5"

行

这是一个演示：

Here is a working fiddle.

如何在ref="item_5"按下时按TouchableOpacity滚动到该行？

Answer 1

此问题是由于行被渲染出this.refs的范围（由于renderRow函数）引起的。

我能够通过添加行ref对象来处理这个值来存储这些值：

＆＃13;

and

＆＃13;

接下来，您希望使用引用函数而不是基本文本引用来存储行引用值：

＆＃13;

False

＆＃13;

最后，根据它的id值引用数组对象：

＆＃13;

filtered = [item for item in my_list if item and item[0]]
                                     ^^^^^^^
                                     False for empty string

＆＃13;

constructor(props) {
    super(props);
    this.rows = [];
    this.state = {
      dataSource: ds.cloneWithRows(numbersDataSource)
    };
  }

＆＃13;

此外，每次使用componentWillUpdate更新数据时都要清除行引用对象，以使其保持整洁。

React Native - 通过ref不工作滚动到Listview的行

1 个答案: