Question

我刚开始学习反应原生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代码有什么损坏，有人可以帮忙吗？

Answer 1

我想我可能知道答案，你已经使用this.loadButton生成了视图并将其保存在this.state.data中。这只做了一次。调用render方法时。它期望一个基于状态的新视图，但是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>
 );
}

这可能会这样做，如果您仍然有任何错误，请报告。

循环按钮中的更改样式反应原生

1 个答案: