react-native - React Native,如何将可触摸不透明度的显示更改为单击另一个时可见,再次单击时不可见?

正如标题所暗示的那样,我正在努力寻找一种方法来让我的可触摸不透明度默认显示为 none(嗯,我想这很容易使用 display: none 的样式),但我无法弄清楚了解如何使用可触摸的不透明度来切换它。

在我看来,逻辑是让 state 在按下时从 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 应该使它们不显示。然后点击第三个可触摸的不透明度,它改变了他们之前的 state => !previous state。

但是,我不确定如何编写代码并且很困惑。任何帮助表示赞赏。谢谢!

回答1

这可以使用条件渲染来完成。每个按钮都需要一个 state 或一个包含数组的 state。

这是一个一般工作的最小示例。

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。第一个切换第二个的可见性,第二个切换第一个的可见性。请注意,第二个的默认 state 设置为 false,因此它在第一次渲染时不可见。