React-native 将组件添加到数组并访问它们

问题描述

我正在尝试进行某种测验，并且我想将所有框都放在一个 FlatList 中。我希望所有这些都隐藏起来，除了第一个，当你回答它时，下一个问题就会出现。 这是我的代码：

function formToData() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  var ss = sheet.getSheetByName("Form Responses 1");
  var targetSheet = sheet.getSheetByName("Cadastro de Cliente");
  var StartRow = 2;
  var RowRange = ss.getLastRow() - StartRow + 1;
  var WholeRange = ss.getRange(StartRow,1,RowRange,30);
  var AllValues = WholeRange.getValues();
  var message = "";

  for (var i = 0; i < AllValues.length; i++) {
    var currentRow = AllValues[i];
    //if row has been sent,then continue to next iteration
    if (currentRow[0] != "" && currentRow[29] != "Sim") {
      //set the row to look at
      var setRow = parseInt(i) + StartRow;

      var data = currentRow[0];
      var dataFormatted = Utilities.formatDate(data,SpreadsheetApp.getActive().getSpreadsheetTimeZone(),"dd/MM/yyyy',às 'HH:mm") + "hs";

      //set HTML template for @R_295_4045@ion
      message +=
        "<p><b>Data: </b>" + dataFormatted + "</p>" +
        "<p><b>Unidade: </b>" + currentRow[1] + "</p>"

      //mark row as "sent"
      ss.getRange(setRow,30).setValue("Sim");

      var values = targetSheet.getRange("A:A").getValues();
      var maxIndex = values.reduce(function (maxIndex,row,index) {
        return row[0] === "" ? maxIndex : index;
      },0);
      targetSheet.getRange(maxIndex + 2,30)
        .setNumberFormat("@")
        .setValues([currentRow]);

      var sendTo = "email";
      var subject = "Cadastro de cliente novo";
      if (message) {
        MailApp.sendEmail({
          to: sendTo,subject: subject,name: "Comercial - Emape",htmlBody: message,});
      }
    }
  }//For loop closes
}

我的方法是将所有 s 添加到一个数组中，这样我就可以简单地执行以下操作：const TYPE = [{id:"1",title:"first question",options:["option 1","option 2"],correct:1},{id:"2",title:"secondquestion",correct:0}]; const answer=a=>Alert.alert(a == 0 ? 'wrong' : 'correct'); const Item = ({info}) => ( <View style={styles.item}> <Text style={styles.title}> {info.title} </Text> <TouchableOpacity style={styles.button} onPress={() => info.correct == 0 ? answer(1) : answer(0)}> <Text> {info.options[0]} </Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={() => info.correct == 1 ? answer(1) : answer(0)}> <Text> {info.options[1]} </Text> </TouchableOpacity> </View> ); function HomeScreen({ navigation }) { return ( <View style={styles.homescreen}> <Text style={styles.homeTitle}> Welkom! </Text> <Text style={styles.homeIntro}> Play the test,yes? </Text> <TouchableOpacity style={styles.homeButton} onPress={() => navigate(navigation,"Type")}> <Text style={styles.homeButtonText}> Start the Test! </Text> </TouchableOpacity> </View> ) } function type() { const renderItem = ({ item }) => <Item info={item} />; return ( <View style={styles.container}> <FlatList data={TYPE} renderItem={renderItem} keyExtractor={item => item.id} style={styles.list} /> <StatusBar style="auto" /> </View> ); } export default function App() { console.log("Starting..."); return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Type" component={type} /> </Stack.Navigator> </NavigationContainer> ) } 或类似的东西。

解决方法

尝试以下可能有助于实现您想要的代码：

import React from 'react';
import {
  Alert,StatusBar,Text,TouchableOpacity,View,} from 'react-native';

const TYPE = [
  {
    id: '1',title: 'first question',options: ['option 1','option 2'],correct: 1,},{
    id: '2',title: 'secondquestion',correct: 0,];

const Item = ({info,onPressOption}) => (
  <View style={styles.item}>
    <Text style={styles.title}>{info.title}</Text>
    <TouchableOpacity style={styles.button} onPress={() => onPressOption(0)}>
      <Text>{info.options[0]}</Text>
    </TouchableOpacity>
    <TouchableOpacity style={styles.button} onPress={() => onPressOption(1)}>
      <Text>{info.options[1]}</Text>
    </TouchableOpacity>
  </View>
);

function HomeScreen({navigation}) {
  return (
    <View style={styles.homescreen}>
      <Text style={styles.homeTitle}>Welkom!</Text>
      <Text style={styles.homeIntro}>Play the test,yes?</Text>
      <TouchableOpacity
        style={styles.homeButton}
        onPress={() => navigate(navigation,'Type')}>
        <Text style={styles.homeButtonText}>Start the Test!</Text>
      </TouchableOpacity>
    </View>
  );
}

function QuestionScreen({navigation}) {
  const [activeQuestionIndex,setActiveQuestionIndex] = React.useState(0);

  const showAlert = (isCorrect,onPress) => {
    Alert.alert(isCorrect ? 'correct' : 'wrong',null,[
      {
        onPress,]);
  };

  const onPressOption = (optionIndex) => {
    const isCorrectOption = TYPE[activeQuestionIndex].correct === optionIndex;

    showAlert(isCorrectOption,() => {
      isCorrectOption && setActiveQuestionIndex(activeQuestionIndex + 1);
    });
  };

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <Item info={TYPE[activeQuestionIndex]} onPressOption={onPressOption} />
    </View>
  );
}