Question

我试图在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中它没有用。

Answer 1

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

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

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

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

1 个答案: