React Native实现点击按钮显示隐藏答案的方法

你可以通过React的useState钩子管理每个答案的显示状态，结合条件渲染实现需求。下面提供两种实用实现方式：

方式1：单个问题单独管理状态（适合少量问题） #

修改后的完整代码如下：

import React, { useState } from "react";
import { View, Text, Button } from 'react-native'

const Testing = ({ navigation }) =>{
  // 定义状态变量，分别控制两个答案的显示/隐藏，初始值为false（默认隐藏）
  const [showAnswer1, setShowAnswer1] = useState(false);
  const [showAnswer2, setShowAnswer2] = useState(false);

  return (
    <View style={{
      backgroundColor: '#f1f1f1',
      justifyContent: 'center', 
      alignItems: 'center',
      padding: 16
    }}>
      {/* 第一个问题 */}
      <Text style={{marginBottom: 8}}>1. In which of the following languages is function overloading not possible?</Text>
      <Text style={{marginBottom: 8}}>
1. C 
2. C++
3. Java
4. Python
      </Text>
      {/* 条件渲染答案：仅当showAnswer1为true时显示 */}
      {showAnswer1 && <Text>Answer: C</Text>}
      {/* 点击按钮切换状态，同时根据当前状态修改按钮文字 */}
      <Button 
        title={showAnswer1 ? "Hide Answer" : "Show Answer"}
        onPress={() => setShowAnswer1(!showAnswer1)} 
        style={{marginVertical: 16}}
      />

      {/* 第二个问题 */}
      <Text style={{marginVertical: 16, marginBottom: 8}}>2.What is Lorem Ipsum?</Text>
      <Text style={{marginBottom: 8}}>
1. Lorem
2. Ipsum
3. dummy
4. text
      </Text>
      {showAnswer2 && <Text>Answer: Lorem</Text>}
      <Button 
        title={showAnswer2 ? "Hide Answer" : "Show Answer"}
        onPress={() => setShowAnswer2(!showAnswer2)} 
      />
    </View>
  );
}

export default Testing;

方式2：抽离数据循环渲染（适合多问题场景，更易维护） #

如果后续要添加更多问题，把问题数据抽成数组循环渲染会更高效：

import React, { useState } from "react";
import { View, Text, Button } from 'react-native'

const Testing = ({ navigation }) =>{
  // 定义问题数据数组
  const questions = [
    {
      question: "1. In which of the following languages is function overloading not possible?",
      options: ["1. C ", "2. C++", "3. Java", "4. Python"],
      answer: "Answer: C"
    },
    {
      question: "2.What is Lorem Ipsum?",
      options: ["1. Lorem", "2. Ipsum", "3. dummy", "4. text"],
      answer: "Answer: Lorem"
    }
  ];

  // 用数组状态管理每个答案的显示状态，初始全为false
  const [showAnswers, setShowAnswers] = useState(Array(questions.length).fill(false));

  // 切换指定索引的答案显示状态
  const toggleAnswer = (index) => {
    const updatedState = [...showAnswers];
    updatedState[index] = !updatedState[index];
    setShowAnswers(updatedState);
  };

  return (
    <View style={{
      backgroundColor: '#f1f1f1',
      justifyContent: 'center', 
      alignItems: 'center',
      padding: 16
    }}>
      {/* 循环渲染所有问题 */}
      {questions.map((item, index) => (
        <View key={index} style={{marginVertical: 16, alignItems: 'center'}}>
          <Text style={{marginBottom: 8}}>{item.question}</Text>
          <Text style={{marginBottom: 8}}>{item.options.join('\n')}</Text>
          {showAnswers[index] && <Text>{item.answer}</Text>}
          <Button 
            title={showAnswers[index] ? "Hide Answer" : "Show Answer"}
            onPress={() => toggleAnswer(index)} 
          />
        </View>
      ))}
    </View>
  );
}

export default Testing;

核心逻辑说明： #

• 用useState定义状态变量，初始值设为false实现默认隐藏答案
• 通过条件渲染（{showState && <Component />}）控制答案的显示与隐藏
• 按钮的onPress事件触发状态切换，实现点击显示/隐藏的交互

内容的提问来源于stack exchange，提问作者Rahul Aadam