javascript - 如何在React Native中使用map创建单独的按钮？

我正在尝试在React Native中制作一个简单的测验应用程序：

App.js

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.quizData = [
      {
        question: 'Who wrote A Game Of Thrones?',
        correctAnswer: 'George RR Martin',
        possibleAnswers: ['JK Rowling', 'Phillip Pulman', 'George RR Martin' ]
      },
    ];
  }

  render() {
    return (
      <View style={styles.container}>
        <MultiChoice answers={this.quizData[0].possibleAnswers}/>
      </View>
    );
  }
}

还有我的MultiChoice组件：

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

class MultiChoice extends Component {
  render() {
    return(
      <View>
          <Text style={styles.button}>{ this.props.answers.map(answer => answer) }</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'blue',
    width: 200,
    height: 40,
  }
})

export default MultiChoice;

我没有任何错误，并且数组的所有元素都显示在同一按钮中，但是我想拥有三个单独的按钮。我在React中编写了相同的代码，并且可以工作，但是在React Native中，它无法工作。

最佳答案

当前，您的map仅返回未修改的每个元素-它什么也不做。然后，它将使用所有文本创建一个单独的<Text>组件。只需让map操作为每个元素返回一个单独的<Text>组件即可实现单独的按钮：

{ this.props.answers.map(answer => <Text style={styles.button}>{answer}</Text>) }

这将使用字符串创建单独的<Text>组件。

关于javascript - 如何在React Native中使用map创建单独的按钮？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44992202/