React Native：FlatListのコンポーネントrefへのアクセス

Question

FlatList内のコンポーネントrefの子にアクセスできません。 componentDidMountメソッドでは、FlatListの参照が1つしかありません。私はネイティブv0.45.1反応し使用してい

import React, { Component } from "react"; 
import { 
    AppRegistry, 
    FlatList, 
    StyleSheet, 
    Text, 
    View 
} from "react-native"; 

export default class touchable extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <FlatList 
      ref="REF-FLATLIST" 
      data={[{ key: "a" }, { key: "b" }]} 
      renderItem={({ item }) => 
      <Text ref={`REF-FLATLIST${item.key}`}> 
       {item.key} 
      </Text>} 
     /> 
     </View> 
    ); 
    } 
    componentDidMount() { 
    console.log(this.refs); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: "center", 
    alignItems: "center", 
    backgroundColor: "#F5FCFF" 
    } 
}); 

AppRegistry.registerComponent("touchable",() => touchable); 

：

は、ここではそれを再現したい場合には私のコードです。

Answer 1

あなたは、REFコールバックをこのように使用してそれを参照を設定することができます。

import React, { Component } from "react"; 
 
import { 
 
    AppRegistry, 
 
    FlatList, 
 
    StyleSheet, 
 
    Text, 
 
    View 
 
} from "react-native"; 
 

 
export default class touchable extends Component { 
 
    render() { 
 
    return (
 
     <View style={styles.container}> 
 
     <FlatList 
 
      ref="REF-FLATLIST" 
 
      data={[{ key: "a" }, { key: "b" }]} 
 
      renderItem={({ item }) => 
 
       <Text ref={(ref) => this.textRef = {...this.textRef, [`REF-FLATLIST${item.key}`]: ref}}> 
 
       {item.key} 
 
       </Text>} 
 
      /> 
 
      </View> 
 
    ); 
 
    } 
 
    componentDidMount() { 
 
    console.log(this.refs, this.textRef); 
 
    } 
 
} 
 

 
const styles = StyleSheet.create({ 
 
    container: { 
 
    flex: 1, 
 
    justifyContent: "center", 
 
    alignItems: "center", 
 
    backgroundColor: "#F5FCFF" 
 
    } 
 
});