切换折叠时反应本机向下箭头或向右箭头

Question

我只希望将我选择的常见问题解答切换箭头右侧更改为向下箭头。但是现在我的代码将在切换调用时将我的所有常见问题解答箭头从右变为向下。

这是我的代码：

const renderItem = ({ item }, open, show) => {         
    return (        
        <View style={styles.container}>                             
            <Collapse onToggle={() => show()}>                
                <CollapseHeader>     
                    <View style={styles.section}>
                        <Text style={styles.question}>{item.question}</Text>     
                        {open ? <AntDesign name="down" size={15} color="gray" /> : <AntDesign name="right" size={15} color="gray" />}                        
                    </View>                    
                </CollapseHeader>                                                                           
                <CollapseBody>                          
                    <Text style={styles.answer}>{item.answer}</Text>                                            
                </CollapseBody>
            </Collapse>                                   
        </View>
    );
};


const FAQComponent = () => {
    console.log('FAQComponent');    
    const [open, setOpen] = useState(false);    
    const show = () => {                           
        setOpen(!open);              
    }

    return (
        <FlatList
            data={Object.values(FAQData)}                
            renderItem={(item) => renderItem(item, open, show)}
            keyExtractor={item => item.id}                
            initialNumToRender={10}            
        />       
    );
};

This is the default layout arrow right:

And This is when one of FAQ collapse :

当折叠箭头变为向下而另一个保持不变时，如何只制作选定的常见问题解答？

谢谢。

Answer 1

const renderItem = (item, seletecdItem, show, index) => {
  // Instead of Passing a Boolean pass a SelectedItem which holds the index of current selected index and verify it with that
  return (
    <View style={styles.container}>
      <Collapse onToggle={() => show(index)}>
        <CollapseHeader>
          <View style={styles.section}>
            <Text style={styles.question}>{item.question}</Text>
            {seletecdItem === index ? (
              <AntDesign name="down" size={15} color="gray" />
            ) : (
              <AntDesign name="right" size={15} color="gray" />
            )}
          </View>
        </CollapseHeader>
        <CollapseBody>
          <Text style={styles.answer}>{item.answer}</Text>
        </CollapseBody>
      </Collapse>
    </View>
  );
};

const FAQComponent = () => {
  console.log('FAQComponent');
  const [selectedItem, setSelectedItem] = useState(-1); // Change the useState to use number
  const show = (index) => { // Pass Index through the callback and update the state
    setSelectedItem(index);
  };

  return (
    <FlatList
      data={Object.values(FAQData)}
      renderItem={{ item,index } => renderItem(item, selectedItem, show, index)} // Pass the Index along with renderItem
      keyExtractor={item => item.id}
      initialNumToRender={10}
    />
  );
};

切换折叠时反应本机向下箭头或向右箭头

React Native Arrow Down or Arrow Right When Toggle Collapse

reactjs

react-native

react-native-flatlist