Question

我在使用onPress事件更改样式时遇到问题，原来我的宽度= 75和高度（default values of width and height），但是当我使用onPress时我想触发方法（method What I would like to use for replace styles value ）它将取代宽度和高度的值为 65 。你能告诉我任何解决这个问题的方法吗？

Answer 1

您可以在75方法中将状态变量从65更改为onPress，并使用该变量覆盖您的宽度/高度。

<YourElement style={[styles.yourOriginalStylesheet, {width: this.state.size, height: this.state.size}]}>

或者，您可以定义另一个样式对象，并根据您在onPress中更改的布尔状态变量有条件地应用它。

<YourElement style={[styles.yourOriginalStylesheet, this.state.changeSize && styles.yourStylesheetWithNewSizes]}>

Answer 2

我在我的手机上，所以这变成了一种我无法验证的伪代码。

唯一的方法是创建一个名为onPress的函数。此函数更改状态变量。在样式中，您可以查看状态变量是否为真。

功能 handlePress（）{this.setState（{压：真}）}

按钮/视图中的

或您要设置的样式 onPress = {（）=＆GT; handlePress（）}

在你的造型中

宽度：this.state.pressed 75：65

如果按下为真，它将在问号后面加第一个值，否则为第二个值。

Answer 3

你可以使用一个touchableHighlight来源于＆＃39; react-native＆＃39; 您的构造函数应该保持对新闻状态的可变性：

constructor(props) {
  super(props);
  this.state = {
    pressStatus: false 
  };
}

按下touchableHighlight时处理的两个函数。

_onHideUnderlay(){
  this.setState({ pressStatus: false });
}
_onShowUnderlay(){
  this.setState({ pressStatus: true });
}

可触摸可能看起来像

<TouchableHighlight
        onPress={()=>{}}
        activeOpacity={0.5}
        style={this.state.pressStatus ? styles.buttonPress : styles.button}
        onHideUnderlay={this._onHideUnderlay.bind(this)}
        onShowUnderlay={this._onShowUnderlay.bind(this)}
        >
  <Text>Press</Text>
</TouchableHighlight>

然后添加到styleSheet

button: {
    alignSelf:'center',
    borderColor: '#000066',
    backgroundColor: '#000066',
    width:65,
    height:65
  },
  buttonPress: {
    alignSelf:'center',
    borderColor: '#000066',
    backgroundColor: '#000066',
    width:75,
    height:75
  },

更改样式onPress事件React Native

3 个答案: