时间戳

首页 > 解决方案 > 如何在反应原生的文本组件中放置按钮（TouchableHighlight）或等效项？

react-native - 如何在反应原生的文本组件中放置按钮（TouchableHighlight）或等效项？

问题描述

我正在尝试在文本组件中放置一个按钮，但我收到错误消息“当前不支持内部嵌套”。当我将“TouchableHighlight”组件移到组件外时，会产生一个问题，我会收到警告“无法在现有状态转换期间更新..”

我正在寻找解决方法或有关如何处理的建议。

import React from 'react'
import { connect } from 'react-redux'
import {
  Button,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  TouchableHighlight,
  TouchableNativeFeedback,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View
} from 'react-native'

class TakeQuiz extends React.Component {

  state = {
    cardIndex : 0,
    currentCardId : "",
    correctAnswers : 0,
    incorrectAnswers : 0,
    showAnswer: false
  }

toggleAnswer(){
  this.setState( () => ({
    showAnswer : !this.state.showAnswer})
  )
}

recordScore(userAnswer, correctAnswer){
  if(userAnswer == correctAnswer){
    this.setState( () => {
      correctAnswers : this.state.correctAnswers +1
    })
  }

  this.setState( () => ({
    cardIndex : this.state.cardIndex +1
  }))
}

currentQuestion(){
  return
}

render() {

const { dispatch, navigation } = this.props;

const deckId = navigation.getParam('deck')
let deck = this.props.deck[deckId];
let deckName = Object.values(deckId);
let cards = Object.keys(deck)
const br = `\n`;

return (
<ScrollView>
<Text>

{cards.map( (card) =>{
  return (

  <Text key={card} id={card}>

  {this.setState( () => {
    currentCardId : card
  })}

  {
    (cards[this.state.cardIndex] == card)
    ? <Text>{br}{br}Card ID: {card} {br}</Text>
    : <Text></Text>
  }


  {
    (cards[this.state.cardIndex] == card)
    ? <Text style={styles.question}>{deck[card].question}</Text>
    : <Text></Text>
  }

  {
    (cards[this.state.cardIndex] == card)
    ? this.state.showAnswer && <Text style={styles.answer}>{br}{deck[card].answer}{br}Correct Answers: {this.state.correctAnswers}</Text>
    : <Text></Text>
  }

  {br}{br}
  </Text>
)
})
}

</Text>


<TouchableHighlight onPress={ () => this.recordScore("yes", this.state.currentCardId)}>
        <Text style={styles.btn}>Yes</Text>
</TouchableHighlight>
      <Text>{br}{br}</Text>
<TouchableHighlight onPress={ () => this.recordScore("no", this.state.currentCardId)}>
        <Text style={styles.btn}>No</Text>
</TouchableHighlight>
      <Text>{br}{br}</Text>
<TouchableHighlight onPress={ () => this.toggleAnswer()}>
        <Text style={styles.btn}>Show Answer</Text>
</TouchableHighlight>


</ScrollView>

  )
}
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

  btn: {
    backgroundColor : '#E53224',
    color : '#ffffff',
    textAlign : 'center',
    padding: 10,
    paddingLeft : 80,
    paddingRight: 80,
    justifyContent : 'center',
    alignItems : 'center',
    borderRadius : 5,
  },

  btnText : {
    color : '#ffff'
  },

  question : {
    fontSize : 24
  },

  answer : {
    fontSize : 18,
    color : "#778899"
  }

})

const mapStateToProps = (state, deckId) => {
  return {
      deck : state.flashcards.decks
  }
}

export default connect(mapStateToProps)(TakeQuiz);

标签： react-native

解决方案

文本组件也接受 onPress。另一种选择是有一个带有嵌套 TouchableHighlights 的 View 和 Texts 。

推荐阅读