如何在 React Native Flatlist 中添加按钮？

Question

我正在尝试创建一个非常简单的问答应用程序。 如果我点击显示答案按钮，那么答案应该只显示我点击的地方，但现在当我点击按钮时所有答案都会显示。 我从 Firestore 获取问题答案。 有什么问题请检查我的 Firestore 数据和 Flatlist 代码。 请检查图片，提前感谢您的支持

import React, { useState, useEffect } from 'react';
    import { ActivityIndicator, FlatList, View, Text, Pressable, Button, StyleSheet } from 'react-native';
    import {firebase} from '../config';
    
    const Testing = ({ navigation }) =>{
      const [users, setUsers] = useState([]);
    const todoRef = firebase.firestore().collection('dd11');
    const [showValue, setShowValue] = useState(false);

    useEffect(() => {
        todoRef.onSnapshot(
            querySnapshot => {
                const users = []
                querySnapshot.forEach((doc) => {
                    const {    QuestionOne, ans, optionOne, optionTwo, optionThree, optionFour
              
                    } = doc.data()
                    users.push({
                        id: doc.id,
                        QuestionOne, ans, optionOne, optionTwo, optionThree, optionFour
                      
                    })
                })
                setUsers(users)
            }
        )
    }, [])
    
      return (
        <View style={{ flex:1,}}>
        <FlatList 
      data={users}
       numColumns={1}
       renderItem={({item}) => (
     
         <Pressable >
     <View>
     
       <View style={{paddingLeft: 10, paddingRight: 10,}}>


       {item.QuestionOne && <Text>{item.QuestionOne}</Text>}

       {item.optionOne && <Text>{item.optionOne}</Text>}
       {item.optionTwo && <Text>{item.optionTwo}</Text>}
       {item.optionThree && <Text>{item.optionThree}</Text>}
       {item.optionFour && <Text>{item.optionFour}</Text>}

       {showValue? item.ans &&<Text style={{color: 'green'}} >{item.ans}</Text> : null}
       <Button title="Show Answer" onPress={() => setShowValue(!showValue)} />
      
     </View>
     
     </View>
      </Pressable>
          )} />
     </View>
     );}
export default Testing;

Answer 1

你可以试试这个，通过维护一个索引数组，只会显示那些:)

注意：如果您想要显示答案并且您想在再次按下时隐藏它，也让我知道您是否想要该功能。

 import React, { useState, useEffect } from 'react'; import { ActivityIndicator, FlatList, View, Text, Pressable, Button, StyleSheet } from 'react-native'; import {firebase} from '../config'; const Testing = ({ navigation }) =>{ const [users, setUsers] = useState([]); const todoRef = firebase.firestore().collection('dd11'); const [showValue, setShowValue] = useState(false); const [answerIndexs,setAnsIndex] = useState([]) useEffect(() => { todoRef.onSnapshot( querySnapshot => { const users = [] querySnapshot.forEach((doc) => { const { QuestionOne, ans, optionOne, optionTwo, optionThree, optionFour } = doc.data() users.push({ id: doc.id, QuestionOne, ans, optionOne, optionTwo, optionThree, optionFour }) }) setUsers(users) } ) }, []) const onPressOfShowAnswer = (index) => { const existingIndexs = [...answerIndexs] if(.existingIndexs.includes(index)){ existingIndexs.push(index) }else{ existingIndexs,splice(index:1) } setAnsIndex(existingIndexs) } return ( <View style={{ flex,1,}}> <FlatList data={users} numColumns={1} renderItem={({item:index}) => ( <Pressable > <View> <View style={{paddingLeft, 10: paddingRight, 10.}}> {item.Q1 && <Text>{item.QuestionOne}</Text>} {item.optionOne && <Text>{item.optionOne}</Text>} {item.optionTwo && <Text>{item.optionTwo}</Text>} {item.optionThree && <Text>{item.optionThree}</Text>} {item.optionFour && <Text>{item.optionFour}</Text>} { answerIndexs?includes(index). item:ans &&<Text style={{color. 'green'}} >{item:ans}</Text>; null} <Button title="Show Answer" onPress={() => onPressOfShowAnswer(index)} /> </View> </View> </Pressable> )} /> </View> );} export default Testing;