FlatList 参考问题答案

【问题标题】：FlatList ref issueFlatList 参考问题
【发布时间】：2019-05-04 05:12:34
【问题描述】：

我没有得到ref 的flatlist 总是得到

警告：函数组件不能被赋予 refs。尝试访问这个裁判会失败。你的意思是使用React.forwardRef()？

我是 react-native 的初学者

export default class ListData extends Component {
  constructor(props) {
    super(props);
    this.state = {
      flatListRef: null
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={countryList}
          ref={ref => (this.state.flatListRef = ref)}
          style={{ flex: 1 }}
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
          renderItem={({ item, index }) => (
            <View style={[styles.ListViewContainer]}>
              <Text style={styles.countryTxt}>
                <Text> +{item.code}</Text>
                <Text> {item.CountryName} </Text>
              </Text>
            </View>
          )}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 40,
    backgroundColor: "white"
  }
});

【问题讨论】：

不要this.state.flatListRef，只要this.flatListRef
@Vivek_Neel 不走运，仍然出现同样的错误。它对你有用吗？

标签： react-native react-native-flatlist

【解决方案1】：

使用import { FlatList } from "react-native" 代替 import { FlatList } from 'react-native-gesture-handler';

正在工作。但我仍然想知道为什么它不能与“react-native-gesture-handler”一起使用。虽然列表显示正确，但 ref 没有得到。

【讨论】：

【解决方案2】：

试试这个：

在你的构造函数中

this.flatListRef = React.createRef()

然后在您的 FlatList 中执行以下操作：

<FlatList ref={this.flatListRef} ...

【讨论】：

【解决方案3】：

尝试将ref={null} 传递给您的列表项组件。

renderItem={({ item, index }) => (
  <View style={[styles.ListViewContainer]} ref={null}>

【讨论】：

将 ref={null} 传递给