如何在React Native中添加單選按鈕？

Question

我想在react native中添加單選按鈕，這非常簡單並且已經完成了。 但是事情是我想在從服務器獲取內容時通過單選按鈕循環播放，因此列表取決於正在更改的獲取項目的數量。我正在獲取的數據如下

json資料

{
    "data": [{
        "content": "question",
        "selection": [
            "(a).option1",
            "(b).option2 ",
            "(c).option3 ",
            "(d).option4 "
        ],
        "correct": "4",
    }]
}

好吧，我正在CardSection組件內部顯示content 。我想使用相應的單選按鈕遍歷selection數組。我正在使用map方法渲染data 。 所以對於selection我應該使用什么呢？for循環可以嗎？但是我不知道該怎么做，請幫忙。

更新

    const formatArray = (arr) => {
  let newArr = []
  arr.map((item, index) => newArr.push({'label': index, value: item}))
  return newArr
}
class QASection extends Component{
render() {

    _setActive = (active) => this.setState({this.setState({selected:value})})

    return(
    {this.state.details.map(a =>
    <Card>
    <CardSection>
    <Text>{a.content}</Text>
    </CardSection>
    <CardSection>
        <RadioForm
          radio_props={radio_props}
          initial={0}
          itemShowKey="label"
          itemRealKey="value"
          dataSource={formatArray(data)}
          onPress={onPress}
        />
<CardSection data={data} key={index} onPress={this._setActive} />
    </Card>
    )}
    );
     } 
}

通過渲染selection[0] ，它將為我提供selection數組中的第一個值。 但是，如何使用單選按鈕遍歷數組中的每個項目呢？

Answer 1

您可以按以下方式循環

我假設您使用的是react-native-radio-form

const formatArray = (arr) => {
  let newArr = []
  arr.map((item, index) => newArr.push({'label': index, value: item}))
  return newArr
}

const YourCardComponent = ({data, onPress}) => {
  return (
    <Card>
      <CardSection>
        <Text>{data.content}</Text>
      </CardSection>
      <CardSection>
        <RadioForm
          radio_props={radio_props}
          itemShowKey="label"
          itemRealKey="value"
          dataSource={formatArray(data.selection)}
          onPress={onPress}
          // ... other props as required
        />
      </CardSection>
    </Card>
  )
}

    // Inside the class


_setActive = (active) => this.setState({selected:value})

render () {
  const {details} = this.state
  return (
    <View>
      {details.map((data, index) => (
        <YourCardComponent data={data} key={index} onPress={this._setActive} />
      ))}
    </View>
  )
}