1

我知道这可能看起来很容易，但我被困在这两天了。任何帮助，将不胜感激。

我有一个这样的数组：

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 中渲染。但我不知道实现它的最佳和简单的方法。

4

1 回答 1

1

我在博览会小吃中实现了一个基本原型，所以找到下面的链接，我会解释我在那里做什么。基本上我使用分页来改变问题。

世博链接测验

代码也在下面，请阅读一次，如果您有疑问，请向您解释。

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',
  },
});

希望能帮助到你。随时怀疑。

于 2019-12-16T06:29:33.490 回答