0

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

const TYPE = [{id:"1",title:"first question",options:["option 1","option 2"],correct:1},{id:"2",title:"secondquestion",options:["option 1","option 2"],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>
  )
}

我的方法是将所有 s 添加到一个数组中，这样我就可以简单地执行此操作：itemArray[i].style.display='None'或类似的操作。

4

1 回答 1

1

试试下面的代码，可以帮助实现你想要的：

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',
    options: ['option 1', 'option 2'],
    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>
  );
}
于 2021-03-01T19:20:03.607 回答