React-native: Tampilan: Gaya tidak diperbarui dengan setState

Dibuat pada 23 Agu 2015 · 3Komentar · Sumber: facebook/react-native

Ketika saya mencoba mengubah gaya Tampilan dengan mengubah status. itu tidak akan merespon. Apakah Anda tahu mengapa?

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

Sumber

aniss

Komentar yang paling membantu

Tidak yakin apakah ini akan memperbaiki keadaan, tetapi coba ubah baris pertama di responderMove menjadi var style = {...this.state.style}; sehingga Anda membuat objek baru dan memperjelas bahwa Tampilan baru pada render pass kedua memiliki gaya yang berbeda dari yang pertama .

ide pada 23 Agu 2015

🎉2 👍1

Semua 3 komentar

ide pada 23 Agu 2015

🎉2 👍1

Tidak 100% yakin karena saya belum mengujinya, tetapi Anda tampaknya memiliki dua warna latar belakang, satu dalam "gaya var" Anda dan yang lainnya dalam "status ini" dan saya pikir Anda mencampurnya. Anda harus memutuskan apakah Anda ingin backgroundColor disimpan di sini atau di sana, dan masing-masing menetapkan nilai yang benar dalam metode responderMove Anda.

PhilippKrone pada 24 Agu 2015

Ini dia!

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
}

Banyak masalah dengan variabel, periksa kode saya di atas untuk melihat di mana Anda salah :) Omong-omong, pertanyaan semacam ini lebih cocok untuk StackOverflow!