React-native: 视图：样式不会随 setState 更新

创建于 2015-08-23 · 3评论 · 资料来源: facebook/react-native

当我尝试通过更改状态来更改视图样式时。它不会响应。你知道为什么吗？

var React = require('react-native');

var { View, Text} = React;

var TouchIt = React.createClass({

  getInitialState() {
    return {
      style: style
    }
  },

  shouldSetResponder() {
    return true;
  },

  shouldSetMoveResponder() {
    return true;
  },

  responderGrant() {
    console.log('finger in');
  },

  responderMove() {
    var style = this.state.style;
    style.backgroundColor = this.getRandomColor();
    this.setState({backgroundColor: backgroundColor});
  },

  responderRelease() {
    console.log('finger out');
  },

  getRandomColor() {
    var randomColor = '#'+Math.random().toString(16).substr(-6);
    return randomColor;
  },

  render() {

    return (
        <View style={this.state.style}
          onStartShouldSetResponder={this.shouldSetResponder}
          onMoveShouldSetResponder={this.shouldSetMoveResponder}
          onResponderGrant={this.responderGrant}
          onResponderMove={this.responderMove}
          onResponderRelease={this.responderRelease}
          >
          <Text>{this.style.backgroundColor}</Text>
        </View>
    );
  }

});

var style = {
  backgroundColor: 'rgb(11, 135, 91)',
  flex: 1
}

module.exports = TouchIt;

Locked

资料来源

aniss

最有用的评论

不确定这是否能解决问题，但尝试将 responderMove 中的第一行更改为var style = {...this.state.style};以便您创建一个新对象并明确第二次渲染过程中的新视图与第一个具有不同的样式.

ide 于 2015-08-23

🎉2 👍1

所有3条评论

ide 于 2015-08-23

🎉2 👍1

不是 100% 确定，因为我还没有测试过，但你似乎有两种 backgroundColors，一种在你的“var style”中，另一个在“this.state”中，我认为你把它们混在一起了。您应该决定是否要将 backgroundColor 保存在这里或那里，并分别在您的 responderMove 方法中设置正确的值。

PhilippKrone 于 2015-08-24

干得好！

var React = require('react-native');

var {
  AppRegistry,
  Image,
  ScrollView,
  StyleSheet,
  Text,
  View,
} = React;

var ExampleApp = React.createClass({

  getInitialState() {
    return {
      style: style
    }
  },

  shouldSetResponder() {
    return true;
  },

  shouldSetMoveResponder() {
    return true;
  },

  responderGrant() {
    console.log('finger in');
  },

  responderMove() {
    var backgroundColor = this.getRandomColor();
    this.setState({style: {backgroundColor}});
  },

  responderRelease() {
    console.log('finger out');
  },

  getRandomColor() {
    var randomColor = '#'+Math.random().toString(16).substr(-6);
    return randomColor;
  },

  render() {

    return (
        <View style={[{flex: 1}, this.state.style]}
          onStartShouldSetResponder={this.shouldSetResponder}
          onMoveShouldSetResponder={this.shouldSetMoveResponder}
          onResponderGrant={this.responderGrant}
          onResponderMove={this.responderMove}
          onResponderRelease={this.responderRelease}
          >
          <Text>{this.state.style.backgroundColor}</Text>
        </View>
    );
  }

});

var style = {
  backgroundColor: 'rgb(11, 135, 91)',
  flex: 1
}

变量有很多问题，查看我上面的代码，看看你哪里出错了 :) 顺便说一句，这种问题更适合 StackOverflow！

brentvatne 于 2015-08-24

此页面是否有帮助？

0 / 5 - 0 等级

React-native: 视图：样式不会随 setState 更新

最有用的评论

所有3条评论

相关问题