React Native，如何将可触摸不透明度的显示更改为点击另一个时可见，再次点击时不可见？

Question

正如标题所暗示的那样，我正在努力寻找一种方法让我的可触摸不透明度默认显示 none（好吧，我想这很容易通过显示样式来实现：none)，但我不知道如何使用可触摸的不透明度来切换它。

在我的脑子里，逻辑是在按下时让状态从true变为false，false是可见的，true是不可见的。但是，我无法收集知识来将其编码出来。这是我目前所掌握的，代码下方有更多信息：

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 应该使它们显示 none。然后点击第三个可触摸的不透明度，它改变了他们以前的状态=>！以前的状态。

但是，我不确定如何将其编码出来并且很困惑。任何帮助表示赞赏。谢谢！

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>
    )
}

上面创建了两个TouchableOpacity。第一个切换第二个的可见性，第二个切换第一个的可见性。请注意，第二个的默认状态设置为 false，因此在第一次渲染时将不可见。

React Native，如何将可触摸不透明度的显示更改为点击另一个时可见，再次点击时不可见？

React Native, how to change display of touchable opacity to visible when clicking on another, and invisible when you click again?

javascript

state

reactjs

react-native