改变循环按钮的样式反应原生答案

【问题标题】：change style in looping button react native改变循环按钮的样式反应原生
【发布时间】：2018-06-29 10:21:06
【问题描述】：

我刚开始学习 react native i want to make ui like this, 我希望图像上的按钮像单选按钮一样工作，所以用户只需选择一个按钮并更改用户选择的按钮样式，下面是我的代码

class ButtonOption extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data : [],
      active : 0
    };
  }

   loadButton(temp){
     let result = [];
     for (let i =0;i<temp.length;i++){
       if(i==this.state.active){
         result.push(
         <View key={i} style={buttonOption.main}>
           <TouchableOpacity style={buttonOption.tabActive} onPress={()=>{this.setState({active:i});alert(this.state.active)}}>
             <Text style={buttonOption.labelActive}>{temp[i]}</Text>
           </TouchableOpacity>
         </View>)
       }else{
         result.push(
         <View key={i} style={buttonOption.main}>
           <TouchableOpacity style={buttonOption.tab} onPress={()=>{this.setState({active:i});alert(this.state.active)}}>
             <Text style={buttonOption.label}>{temp[i]}</Text>
           </TouchableOpacity>
         </View>)
       }
     }
     return result;
   }

   componentDidMount(){
     this.setState({data:this.loadButton(this.props.arrButton)})
   }

   render() {
    return (
      <View style={{flexDirection:'row',padding:10}}>
        {this.state.data}
      </View>
    );
  }
}
export default ButtonOption;

在上面的代码中，我尝试制作带有循环的按钮，在循环功能中，我使用 active 作为检查活动按钮的状态，并添加了 onPress 函数，因此每次用户单击按钮时，活动状态都会改变，但是当我运行并选择时按钮的活动状态不会改变，我的 onPress 代码有什么问题，有人可以帮忙吗？

【问题讨论】：

当前代码有什么问题？太宽泛且不清楚的问题。
活动状态不会改变
请编辑您的问题以包含相关信息。 cmets 中的信息没有价值。
对不起，我改变了我的问题

标签： javascript reactjs react-native

【解决方案1】：

我想我可能知道答案，您已经使用 this.loadButton 生成了视图并将其保存在 this.state.data 中。这仅进行一次。当调用渲染方法时。它期待一个基于状态的新视图，但是 this.state.data 并没有改变，因为您在 componentDidMount 中创建了它。您需要做的是在 render 方法中调用 this.loadButton(this.props.arrButton) 。这将在每次调用 render 方法时创建新视图。

render() {
 return (
   <View style={{flexDirection:'row',padding:10}}>
     {this.loadButton(this.props.arrButton)}
   </View>
 );
}

这样可以，如果还有错误，请报告。

【讨论】：