React-native: Vue : le style ne se met pas à jour avec setState

Créé le 23 août 2015 · 3Commentaires · Source: facebook/react-native

Lorsque j'essaie de changer le style de vue en changeant l'état. il ne répondra pas. Avez-vous une idée pourquoi?

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

Source

aniss

Commentaire le plus utile

Je ne sais pas si cela résoudra les choses, mais essayez de changer la première ligne de responderMove en var style = {...this.state.style}; afin de créer un nouvel objet et d'indiquer clairement que la nouvelle vue de la deuxième passe de rendu a un style différent de la première .

ide le 23 août 2015

🎉2 👍1

Tous les 3 commentaires

ide le 23 août 2015

🎉2 👍1

Pas sûr à 100% car je ne l'ai pas testé, mais vous semblez avoir deux backgroundColors, l'un dans votre "style var" et l'autre dans "this.state" et je pense que vous les mélangez. Vous devez décider si vous souhaitez que le backgroundColor soit enregistré ici ou là, et respectivement définir la valeur correcte dans votre méthode responderMove.

PhilippKrone le 24 août 2015

Voici!

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
}

Beaucoup de problèmes avec les variables, consultez mon code ci-dessus pour voir où vous vous êtes trompé :) Au fait, ce genre de question est mieux adapté pour StackOverflow !