React Native中通过onPress事件修改组件宽高样式的问题求助

嘿，这问题我之前也碰到过！在React Native里要通过点击事件修改组件样式，关键得用**状态（state）**来驱动变化——直接硬改样式对象是不会触发组件重渲染的，所以得把尺寸值存在状态里，点击时更新状态，样式跟着联动。

我给你两种常用组件写法的解决方案：

一、函数组件（推荐，React 16.8+） #

用useState钩子来管理尺寸状态，点击时更新状态即可：

import React, { useState } from 'react';
import { TouchableOpacity, StyleSheet, Text } from 'react-native';

export default function ResizableBox() {
  // 初始化宽高为75
  const [boxSize, setBoxSize] = useState(75);

  const handlePress = () => {
    // 点击后将宽高改为65
    setBoxSize(65);
  };

  return (
    <TouchableOpacity
      onPress={handlePress}
      // 合并默认样式和动态尺寸样式
      style={[styles.box, { width: boxSize, height: boxSize }]}
    >
      <Text>点击我缩小</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  box: {
    backgroundColor: '#4287f5',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
  },
});

关键说明： #

• 用TouchableOpacity作为可点击容器（也可以用Pressable，功能更强大），普通View没有onPress事件哦
• 动态样式通过内联方式和状态绑定，状态更新时组件会自动重渲染，应用新的宽高
• 如果需要点击切换宽高（比如75↔65），可以把handlePress改成这样：

  const handlePress = () => {
    setBoxSize(prevSize => prevSize === 75 ? 65 : 75);
  };
  

二、类组件写法 #

如果你还在使用类组件，用this.state和this.setState来实现：

import React, { Component } from 'react';
import { TouchableOpacity, StyleSheet, Text } from 'react-native';

export default class ResizableBox extends Component {
  state = {
    boxSize: 75,
  };

  handlePress = () => {
    this.setState({ boxSize: 65 });
  };

  render() {
    const { boxSize } = this.state;
    return (
      <TouchableOpacity
        onPress={this.handlePress}
        style={[styles.box, { width: boxSize, height: boxSize }]}
      >
        <Text>点击我缩小</Text>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  box: {
    backgroundColor: '#4287f5',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
  },
});

这样写就能完美实现你要的效果啦，点击组件后宽高会从75变成65~

内容的提问来源于stack exchange，提问作者Metallistener