在 React-Native 中，我有一个问题列表，我需要每页呈现 2 个问题。实现它的最佳方法是什么？

Question

我知道这看起来很简单，但我已经坚持了 2 天。任何帮助将不胜感激。

我有一个类似这样的数组：

let arr = [
   {question: 'SomeQuestion1', options: ["ABC", "CDE", "EFG", "GHI"]},
   {question: 'SomeQuestion2', options: ["ABC", "CDE", "EFG", "GHI"]},
   {question: 'SomeQuestion3', options: ["ABC", "CDE", "EFG", "GHI"]},
   {question: 'SomeQuestion4', options: ["ABC", "CDE", "EFG", "GHI"]},
   {question: 'SomeQuestion5', options: ["ABC", "CDE", "EFG", "GHI"]},
   {question: 'SomeQuestion6', options: ["ABC", "CDE", "EFG", "GHI"]},
   .
   .
   .
]

我需要实现这样的目标：

每页一次应该有 2 个问题。

我想在嵌套的 Flatlist 中呈现。但我不知道实现它的最佳和简单方法。

Answer 1

我在 expo snack 中实现了一个基本原型，所以找到下面的 link，我会解释我在那里做什么。基本上我使用分页来更改问题。

Expo-link-quiz

还有代码在下面，看过一遍，有疑惑问我解释给你。

import * as React from 'react';
import { Text, View, StyleSheet,TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import RadioForm, {RadioButton, RadioButtonInput, RadioButtonLabel} from 'react-native-simple-radio-button';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
var radio_props = [
  {label: 'param1'},
  {label: 'param2', value: 1 }
];
export default class App extends React.Component {

  constructor(props){
    super(props);
    this.state={
       arr : [
   {question: 'SomeQuestion1', options: ["ABC", "CDE", "EFG", "GHI"]},
   {question: 'SomeQuestion2', options: ["ABC", "CDE", "EFG", "GHI"]},
   {question: 'SomeQuestion3', options: ["ABC", "CDE", "EFG", "GHI"]},
   {question: 'SomeQuestion4', options: ["ABC", "CDE", "EFG", "GHI"]},
   {question: 'SomeQuestion5', options: ["ABC", "CDE", "EFG", "GHI"]},
   {question: 'SomeQuestion6', options: ["ABC", "CDE", "EFG", "GHI"]},
       ],

       numOfDivisions:0,
       activeQuestion1:0,
       activeQuestion2:1
    }
  }

componentDidMount(){
  let lengthQ = this.state.arr.length;
  let numOfDivisions = lengthQ/2;
  this.setState({numOfDivisions})

}


labelRadio = (arr) => {
  return(
<View>
  <Text>{arr.question}</Text>
 <RadioForm
          radio_props={radio_props}
          initial={0}
          onPress={(value) => {this.setState({value:value})}}
        />
        </View>
  )

}


computeQuestions =(index) => {
this.setState({
  activeQuestion1:index-1,
  activeQuestion2:index
})
}

compuetPagination = () => {
let newnew = this.state.arr.slice(0,this.state.numOfDivisions);
return newnew.map((data,index) => (
  <TouchableOpacity style={{marginHorizontal:10}} onPress ={() =>this.computeQuestions(index+1)}>{index +1}</TouchableOpacity>
))
}

  render() {
    return (
      <View style={styles.container}>
      {this.labelRadio(this.state.arr[this.state.activeQuestion1])}
      {this.labelRadio(this.state.arr[this.state.activeQuestion2])}
      <View style={{flexDirection:'row'}}>
      {this.compuetPagination()}
      </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

希望对您有所帮助。有疑问请随意。

在 React-Native 中，我有一个问题列表，我需要每页呈现 2 个问题。实现它的最佳方法是什么？

In React-Native, I have a list of questions and I need to render 2 questions per page. What is the best approach to achieve it?

reactjs

react-native

object

react-native-flatlist

react-native-sectionlist