如何在 React Native 中进行拖放测验？答案

【问题标题】：How to Make Drag and Drop Quiz in React Native?如何在 React Native 中进行拖放测验？
【发布时间】：2022-07-30 07:49:09
【问题描述】：

希望我们无论身在何处都身体健康。当我想在 React Native 中创建一个拖放类型的测验时，我遇到了问题。我正在使用 react-native-drax 库。我使用的数据来自firebase，如果描述如下：

[{
    quest: "Book ?",
    options: ["Yes","No"],
    correct_option: "Yes",
    type:'yesorno',
    image:'urlofimages'
},
{
    quest: "Fill the following words  \n F_ _t Train M_ _ ern",
    options: ["as","od","am"],
    correct_option: ["as","od"],
    type:'drag',
    image:''
}]

（所有测验数据都包含在变量allData中）。

然后我制作了以下组件，以创建拖放区域。我让它动态。 Dropzone 对应 correct_option 的数量，TouchDrag 对应选项的数量（取自数据）。

import { DraxProvider, DraxView, DraxList } from 'react-native-drax';
....
.....
.......
const Exam = () => {
  const [showAnwOne, setAnwOne] = useState([]);
  const [showAnwTwo, setAnwTwo] = useState([]);
...
.....
.......
 
  const Draxzone= ({item,index}) =>{
    return(
      <View style={{flexDirection:'row', justifyContent:'space-around', width:'100%', marginBottom:20}}>
          <DraxView
              style={styles.receiver}
              key={item}
              receivingStyle={styles.receiving}
              onReceiveDragDrop={(event) => {
                  let selected_item = event.dragged.payload;
                  setAnwOne(selected_item)
              }}

          >
            <Text>{showAnwOne}</Text>
        </DraxView>
      </View>
    )
  }

  const TouchDrag = ({item,index})=>{
    return(
            <DraxView
                style={styles.draggable}
                draggingStyle={styles.dragging}
                dragReleasedStyle={styles.dragging}
                hoverDraggingStyle={styles.hoverDragging}
                dragPayload={index}
                longPressDelay={0}
                key={item}
            >
                <Text style={{color:'#FFF'}}>{item}</Text>
            </DraxView>
    )
  }

之后，我将组件显示如下：（测验根据其类型显示）

{allData[currentIndex]?.type === 'drag' ?
    <DraxProvider>
       <View style={{width:'100%'}}>
          <View style={{flexDirection:'row', justifyContent:'space-around', width:'100%', marginBottom:20}}>
             {allData[currentIndex]?.correct_option.map((item, index) => Draxzone({ item, index }))}
          </View>
       </View>
       <View style={{flexDirection:'row', justifyContent:'space-around', width:'100%', marginBottom:20}}>
           <DraxList
              data={allData[currentIndex]?.options}
              renderItemContent={TouchDrag}
              keyExtractor={(item, index) => item.toString()}
              numColumns={3}
              ItemSeparatorComponent={FlatListItemSeparator}
              scrollEnabled={true}
           />
       </View>
    </DraxProvider>
 : <Text>Sorry This Qustion not have type</Text> }

结果执行如下： I tried to drag and drop components, the results are like in steps 2 and 3

而我想要的结果如下：Text on Dropzone follows text on TouchDrag

在那之后，我也很困惑以 correct_option 中的顺序验证正确答案。不像一个只使用例如从 A 到 E 的选项的测验。老实说这对我来说是新的，我一直在寻找在 React Native 中使用拖放的测验参考资源，但我没有找到任何结果。

如果有更容易理解的东西，我请求指导。希望这里的一些朋友可以帮助解决这个问题，感谢您的关注和时间。

【问题讨论】：

标签： javascript react-native drag-and-drop create-react-app draggable

【解决方案1】：

不确定这是否能解决您的问题，但这里有一些建议：

尝试使用唯一 ID 而不是索引。
DraxView 有一个 payload 属性，您可以在其中传入 ID 并相应地使用它。

祝你好运！

【讨论】：