Блог

Я создал меню свертывания и сопоставил его с данными в рендеринге, я также обработал меню свертывания, которое сворачивается и расширяется в соответствии с их конкретным идентификатором. Но когда я нажимаю на следующее меню свертывания, предыдущее закрывается, и после повторного нажатия открывается следующее меню свертывания. Я хочу написать функциональность, при которой, когда я нажимаю на следующее меню свертывания, предыдущее меню сворачивания закрывается, а следующее открывается одновременно. например, ящик lenskart, но я не могу этого сделать

Вот мой код:

       const SideMenu = (props) => {
  const {signOut} = useContext(AuthContext);
  const [Routes, setRoutes] = useState([]);
  const [expanded, setCollapse] = useState(false);
  const [colId, setColID] = useState('');
  const [colorId, setColorID] = useState('');
  const [reflink, setRefLink] = useState(false);

  useEffect(() => {
    getData();
  }, []);

  const getData = () => {
    setRoutes(api.getNavigation());
  };
  const toggleExpand = (id) => {
    setColorID(id);
    setRefLink(true);
    setColID(id);
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setCollapse(!expanded);
  };

  const changeColor = (id) => {
    setColorID(id);
    setRefLink(true);
  };

  console.log('expanded', expanded);
  return (
    <StrictMode>
      <ScrollView contentContainerStyle={styles.scroll}>
       
            <View>
              {Routes.map((o, i) =>
                o.subarr.length > 0 ? (
                  <View>
                    <TouchableOpacity onPress={() => toggleExpand(o.id)}>
                      <View style={styles.mainContainer}>
                        <View style={[styles.sidebarDesign]}>
                          <View style={styles.barIcon}>
                            <Icon.SimpleLineIcons
                              name={o.icon}
                              size={20}
                              color={
                                colorId === o.id ? Color.linkColor : Color.gray
                              }
                            />
                          </View>
                          <View style={styles.barLabel}>
                            <Text
                              style={[
                                styles.labelStyle,
                                colorId === o.id
                                  ? styles.linkText
                                  : styles.normalText,
                              ]}>
                              {o.title.toUpperCase()}
                            </Text>
                          </View>
                          <View style={styles.barIcon}>
                            <Icon.SimpleLineIcons
                              name={
                                colId === o.id
                                  ? expanded
                                    ? 'arrow-up'
                                    : 'arrow-down'
                                  : 'arrow-down'
                              }
                              size={20}
                              color={Color.grayDark}
                            />
                          </View>
                        </View>
                      </View>
                    </TouchableOpacity>

                    {o.subarr.map((r, j) => (
                      <View>
                        {colId === o.id
                          ? expanded amp;amp; (
                              <TouchableOpacity
                                onPress={() => {
                                  props.navigation.navigate(r.label);
                                  changeColor(r.id);
                                }}>
                                <View style={[styles.sidebarDesign]}>
                                  <View style={styles.barIcon}>
                                    {/* <Icon.FontAwesome
                            name={r.icon}
                            size={20}
                            color={Color.gray}
                          /> */}
                                  </View>
                                  <View style={styles.barLabel}>
                                    <Text
                                      style={[
                                        styles.labelStyle,
                                        colorId === r.id
                                          ? styles.linkText
                                          : styles.normalText,
                                      ]}>
                                      {r.label.toUpperCase()}
                                    </Text>
                                  </View>
                                  <View style={styles.barIcon}>
                                    {/* <Text>icon</Text> */}
                                  </View>
                                </View>
                              </TouchableOpacity>
                            )
                          : null}
                      </View>
                    ))}
                  </View>
                ) : (
                  <View>
                    <TouchableOpacity
                      onPress={() => {
                        props.navigation.navigate(o.label);
                        changeColor(o.id);
                      }}>
                      <View style={[styles.sidebarDesign]}>
                        <View style={styles.barIcon}>
                          <Icon.SimpleLineIcons
                            name={o.icon}
                            size={20}
                            color={
                              colorId === o.id ? Color.linkColor : Color.gray
                            }
                          />
                        </View>
                        <View style={styles.barLabel}>
                          <Text
                            style={[
                              styles.labelStyle,
                              colorId === o.id
                                ? styles.linkText
                                : styles.normalText,
                            ]}>
                            {o.title.toUpperCase()}
                          </Text>
                        </View>
                        <View style={styles.barIcon}>
                          {/* <Text>icon</Text> */}
                        </View>
                      </View>
                    </TouchableOpacity>
                  </View>
                ),
              )}
            </View>
          </View>
          {/* <Divider style={styles.parentHr} /> */}
          <View style={styles.containerThree}>
            <View style={styles.bottomPart}>
              <View>
                <TouchableOpacity
                  onPress={() => {
                    signOut();
                  }}>
    </StrictMode>
  );
};
 

Я не уверен, в какой форме вы получаете данные, но я создал тот же сценарий, в котором есть три кнопки, и при нажатии каждой кнопки предыдущее сообщение скрывается, а следующее отображается одновременно. Я создал ту же функцию переключения, о которой вы просили, пройдите через нее один раз, если это работает для вас.

 export default function Toggle() {

    const [toggleOne, settoggleOne] = useState(true);
    const [toggleTwo, settoggleTwo] = useState(false);
    const [toggleThree, settoggleThree] = useState(false);

    const toggleOnefn = () => {
        if(toggleOne == true){
            settoggleOne(false)
            settoggleTwo(true)
        }else{
            settoggleOne(true)
            settoggleTwo(false)
            settoggleThree(false)
        }
    }

    const toggleTwofn = () => {
        if(toggleTwo == true){
            settoggleTwo(false)
            settoggleThree(true)
        }else{
            settoggleTwo(true)
            settoggleOne(false)
            settoggleThree(false)
        }
    }

    const toggleThreefn = () => {
        if(toggleThree == true){
            settoggleThree(false)
            settoggleOne(true)
        }else{
            settoggleThree(true)
            settoggleTwo(false)
            settoggleOne(false)
        }
    }

    return (
        <div>
            <button onClick={toggleOnefn}>One</button>
            {
                toggleOne == true ? <p>Data One</p> : ''
            }
            <br />
            <button onClick={toggleTwofn}>One</button>
            {
                toggleTwo == true ? <p>Data One</p> : ''
            }
            <br />
            <button onClick={toggleThreefn}>One</button>
            {
                toggleThree == true ? <p>Data One</p> : ''
            }
            <br />
        </div>
    );
}