javascript - 如何在React Native中将State View样式宽度设置为+1，高度设置为+1？

Question

我想要这个框( View )的样式宽度和高度+1

我不写style={{width:{{this.state.w}},height{{this.state.h}},backgroundColor:'blue'}}

export default class App extends Component { 

constructor(props){ 
 super(props); 
  this.state = { 
    w: 50, 
    h: 50, 
  } 
 } 

_addBox(){ 

  this.setState ({ 
      w:this.state.w + 1, 
      h:this.state.h + 1 
  });
}


 render() { 
  return ( 
  <view> 
   <view style="{{{styles.box}}}"> 
    <view style{{width:xxxx,height:xxxx,backgroundcolor:'blue'}}> 
     <text style="{styles.box}">
      {this.state.w}
     </text> 
    </view> 
    <buttontitle="add box"="" onpress="{this._addBox.bind(this)}" /> 
   </view> 
  </view> 
);
} 
}

帮帮我:(

Answer 1

如果你在setState中使用状态那么推荐的方式是:

_addBox = () => {
    this.setState(prevState => ({
        w: prevState.w + 1,
        h: prevState.h + 1
    }))
}

在你的渲染函数中只需使用你的状态:

render() {
    const { w, h } = this.state
    return (
        <View>
            <View style={styles.box}>
                <View style={{ width: w, height: h, backgroundColor: 'blue' }}>
                    <Text style={styles.box}>{w}</Text>
                </View>
                <Button title="add box" onPress="{this._addBox}" />
            </View>
        </View>
    )
}