React Native，如何在单击另一个单击另一个时更改可触摸不透明的表现，并且在再次单击时看不见？

Question

正如标题所暗示的那样，我正在努力寻找一种使我的可接触性不相位的方法默认没有显示（嗯，我想通过显示的样式很容易：无），但是我无法弄清楚出去如何使用可触摸的不透明度切换该操作。

在我的脑海中，逻辑是使状态从真实的变为falsepress变化，而在不可见的情况下，错误是可见的。但是，我无法召集知识将其编码。这是我到目前为止拥有的更多信息，以下代码：

import React, {useState} from 'react';
import { KeyboardAvoidingView, StyleSheet, Text, View, TextInput, TouchableOpacity, Keyboard, ImageBackground } from 'react-native';
import Task from './components/task';

const plus = {uri: 'https://media.discordapp.net/attachments/639282516997701652/976293252082839582/plus.png?width=461&height=461'};
const done = {uri: 'https://media.discordapp.net/attachments/736824455170621451/976293111456231434/done.png?width=461&height=461'};
const exit = {uri: 'https://media.discordapp.net/attachments/639282516997701652/976293251759898664/exit.png?width=461&height=461'};
const cog = {uri: 'https://media.discordapp.net/attachments/639282516997701652/976293672884789288/cog.png?width=461&height=461'};

function App() {
  const [task, setTask] = useState();
  const [taskItems, setTaskItems] = useState([]);
  const buttons = {plus, done, exit, cog}
  const [selected, setSelected] = useState(buttons.plus)

  const [done, setDone] = useState(buttons.plus);

  const openMenu = () => {
    setSelected(buttons.exit);

    //Make 'done' and 'cog' TouchableOpacity(s) visible. Click again and they become invisible.
    //this.setState({ visible : !this.state.visible}) This makes visible invisible if not invisible already.
    //visible should be the name of a state.

    {/*handleAddTask();*/}
  }

  const handleAddTask = () => {
    setDone(buttons.done);
    Keyboard.dismiss();
    setTaskItems([...taskItems, task]); {/*Puts out everything in the taskItems as a new array then appends the new task to it */}
    setTask(null);
    setSelected(buttons.plus) //Makes exit button go back to plus because it shows that its finished. DO same for display none for extended buttons when I figure it out.
  }

  const completeTask = (index) => {
    let itemsCopy = [...taskItems];
    itemsCopy.splice(index, 1);
    setTaskItems(itemsCopy);
  }

  return (
    <View style={styles.container}>
      
    {/*Tasks*/}
    <View style={styles.tasksWrapper}>
      <Text style={styles.sectionTitle}>Tasks</Text>

      <View style={styles.items}>
      {/*This is where tasks go*/}
      {
        taskItems.map((item, index) => {
              return (
                <TouchableOpacity key={index}  onPress={() => completeTask(index)}>
                  <Task text={item} /> 
                </TouchableOpacity>
              )
            })
          }
        </View>
      </View>

    {/*Write a task*/} 
    <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} style={styles.writeTaskWrapper}>
    

      <TextInput style={styles.input} placeholder={'Write a task'} value={task} onChangeText={text => setTask(text)}/>

    <View style={styles.buttonRow}>

    <TouchableOpacity onPress={() => openConfig()}> 
      {/* Opens config for creation (i.e. calendar, timer, repetition, etc). */}
        <View style={styles.addWrapper}>
          <ImageBackground source={buttons.cog} alt='button' resizeMode="cover" style={styles.plusButton} />
        </View>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => handleAddTask()}> 
      {/* Done (check) button which does handleAddTask. */}
        <View style={styles.addWrapper}>
          <ImageBackground source={buttons.done} alt='button' resizeMode="cover" style={styles.plusButton} />
        </View>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => openMenu()}> 
      {/* Onpress opens menu, then shows exit button to go back and revert menu to one button. */}
        <View style={styles.addWrapper}>
          <ImageBackground source={selected} alt='button' resizeMode="cover" style={styles.plusButton} />
        </View>
      </TouchableOpacity>
      
    </View>
      

    </KeyboardAvoidingView>
  </View>
  );
}

底部的三个可接触式不相处是我要更改的内容。默认情况下，前两个应该是看不见的，我认为我可以通过为他们分配usestate（false）来做到这一点，而false则可以使他们的显示无关。然后单击第三个触摸不透明度，它更改了他们以前的状态=＆gt; ！以前的状态。

但是，我不确定如何将其编码并感到困惑。任何帮助都将受到赞赏。谢谢！

Answer 1

这可以使用条件渲染完成。您要么需要每个按钮的状态，要么需要保存数组的状态。

这是一个通常起作用的最小示例。

function App() {
    const [isAVisible, setAVisible] = useState(true);
    const [isBVisible, setBVisible] = useState(false);

    return (
        <View>
            {isAVisible && ( 
               <TouchableOpacity onPress={() => setIsBVisible(prev => !prev)}}>
                   <Text>Toggle Visibility of B</Text>
               </TouchableOpacity>
            )}
            {isBVisible && (
               <TouchableOpacity onPress={() => setIsAVisible(prev => !prev)}}>
                   <Text>Toggle Visibility of A</Text>
               </TouchableOpacity>
            )}
        </View>
    )
}

以上创建了两个触摸性。第一个切换了第二个的可见性，第二个可以切换第一个的可见性。请注意，第二个状态的默认状态设置为false，因此在第一个渲染中不会可见。