React-native: عرض: النمط لا يتم تحديثه مع setState

تم إنشاؤها على ٢٣ أغسطس ٢٠١٥ · 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

التعليق الأكثر فائدة

لست متأكدًا مما إذا كان هذا سيؤدي إلى إصلاح الأشياء ولكن حاول تغيير السطر الأول في المستجيب انتقل إلى var style = {...this.state.style}; بحيث تنشئ كائنًا جديدًا وتوضح أن طريقة العرض الجديدة في مسار التجسيد الثاني لها نمط مختلف عن الأول .

ide في ٢٣ أغسطس ٢٠١٥

🎉2 👍1

ال 3 كومينتر

ide في ٢٣ أغسطس ٢٠١٥

🎉2 👍1

لست متأكدًا بنسبة 100٪ لأنني لم أختبرها ، ولكن يبدو أن لديك لونين للخلفية ، أحدهما في "نمط var" الخاص بك والآخر في "this.state" وأعتقد أنك تخلط بينهما. يجب أن تقرر ما إذا كنت تريد حفظ لون الخلفية هنا أم هناك ، وتعيين القيمة الصحيحة على التوالي في طريقة ResponderMove الخاصة بك.

PhilippKrone في ٢٤ أغسطس ٢٠١٥

ها أنت ذا!

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!