我多年来一直坚持这个问题,试图弄清楚当我按下每个呈现的 FlatList 项目时,如何分别控制台记录每个 Firebase Cloudstore 文档 ID。
我可以通过使用onPress={() =>{console.log(this.state.posts[0].key)}}
等来获取某个密钥/ID 。但我不知道如何分别获取每个密钥。本质上,我只想要我按下的 touchableOpacity 的文档 ID。不只是 [0]
屏幕截图位于应用程序布局的下方,因此您可以了解并了解代码示例
PostsLayout.js
export default class PostsLayout extends React.Component {
render() {
const {summary, stringTime, user} = this.props;
return (
<TouchableOpacity
style={styles.container}
onPress={this.props.onPress}
>
<PostsUser user={user}/>
<PostsSummary summary={summary}/>
<PostsDate time={stringTime}/>
</TouchableOpacity>
)
}
}
平面列表布局.js
export default class FlatListLayout extends React.Component {
render() {
return (
<ScrollView >
<FlatList
data={this.props.data}
renderItem={({item}) => <PostsLayout {...item} onPress={this.props.onPress}/>}
/>
</ScrollView>
)
}
}
屏幕布局.js
export default class ScreenLayout extends React.Component {
state = {
posts: []
}
db = firebase.firestore()
path = this.db.collection('usersData').doc(firebase.auth().currentUser.uid).collection("posts")
onCollectionUpdate = (querySnapshot) => {
const posts = [];
querySnapshot.forEach((doc) => {
const {summary, time, stringTime, user, userId} = doc.data();
posts.push({
key: doc.id, doc, summary,
time, stringTime, user, userId
});
});
this.setState({
posts
});
}
componentDidMount() {
const {currentUser} = firebase.auth();
this.setState({currentUser})
this.unsubscribe = this.path.onSnapshot(this.onCollectionUpdate)
}
componentWillUnmount() {
this.unsubscribe();
}
render() {
return (
<FlatListLayout
data={this.state.posts}
onPress={() => {console.log(this.state.posts[0].key)}}
/>
)
}
}
感谢您阅读本文,请帮助:)