{[styles.box, { transform: [{ scale:this.state.scaleNum}] }]}>当这样给scale赋值时，初始化生效，但是在一个事件中改变scaleNum的值，scaleNum的值改变了，页面貌似没有重新渲染？

[xiayongtian]

<View style={[styles.box, { transform: [{ scale:this.state.scaleNum}]}>当这样给scale赋值时，初始化生效，但是在一个事件中改变scaleNum的值，scaleNum的值改变了，页面貌似没有重新渲染？

[bvaughn]

This question seems to be missing details for us to actually be able to answer it. Please provide a more complete code example. Your component should be re-rendered if you update scaleNum by calling setState. It would not re-render if you updated this.state.scaleNum directly (but you should not do that).

[wanmaoor]

Show us how you change your scaleNum, if you change this.state.scaleNum directly, that won't be work.

[xiayongtian]

这个问题似乎缺少细节，我们无法实际回答。请提供更完整的代码示例。如果scaleNum通过调用进行更新，则应重新渲染组件setState。如果this.state.scaleNum直接更新，它将不会重新渲染（但您不应该这样做）。

import React, { Component } from "react";
import {
  SafeAreaView,
  Button,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from "react-native";

import Ionicons from "react-native-vector-icons/Ionicons";

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      scaleNum: 2,
    };
  }

  setScale = () => {
    this.setState({
      scaleNum: [{ scale: 1 }],
    });
  };

  render() {
    return (
      <View>
        <View
          ref="test"
          style={[
            styles.box,
            {
              transform: [{ scale: this.state.scaleNum }],
            },
          ]}
        >
          <Text style={styles.text}>{this.state.scaleNum}</Text>
        </View>

        <Button
          onPress={() => this.setScale()}
          title="Learn More"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContentContainer: {
    alignItems: "center",
    paddingBottom: 60,
  },
  box: {
    height: 100,
    width: 100,
    borderRadius: 5,
    marginVertical: 40,
    backgroundColor: "#61dafb",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 14,
    fontWeight: "bold",
    margin: 8,
    color: "#000",
    textAlign: "center",
  },
});

[xiayongtian]

向我们展示如何更改您的方法scaleNum，如果this.state.scaleNum直接更改，那将行不通。

向我们展示如何更改您的方法scaleNum，如果this.state.scaleNum直接更改，那将行不通。

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      scaleNum: 2,
    };
  }

  setScale = () => {
    this.setState({
      scaleNum: 3,
    });
  };

  render() {
    return (
      <View>
        <View
          ref="test"
          style={[
            styles.box,
            {
              transform: [{ scale: this.state.scaleNum }],
            },
          ]}
        >
          <Text style={styles.text}>{this.state.scaleNum}</Text>
        </View>

        <Button
          onPress={() => this.setScale()}
          title="Learn More"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContentContainer: {
    alignItems: "center",
    paddingBottom: 60,
  },
  box: {
    height: 100,
    width: 100,
    borderRadius: 5,
    marginVertical: 40,
    backgroundColor: "#61dafb",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 14,
    fontWeight: "bold",
    margin: 8,
    color: "#000",
    textAlign: "center",
  },
});

[xiayongtian]

我通过

this.setState({
  scaleNum:3
})

改变 scaleNum，这个值确实通过触发事件改变了，但是页面确实效果并没有改变，没有重新渲染貌似

[bvaughn]

I assumed this was a question about react-native-web, but since your example shows it's `react-native- you should probably check out their suggestions for getting help: https://reactnative.dev/help

FWIW, I made your example above into a Code Sandbox using react-native-web and it seems to work fine: https://codesandbox.io/s/blue-bash-nrv2p

I'm going to close this issue since it's not a React issue. Good luck though!