反應本機列表視圖不改變狀態改變的風格

我的目標是切換一個開關組件和值的變化，以影響將用不同於默認渲染樣式的樣式渲染的父代的狀態。反應本機列表視圖不改變狀態改變的風格

此刻狀態更新正常，但組件未重新呈現。

import React, { 
    AppRegistry, 
    Component, 
    Image, 
    ListView, 
    StyleSheet, 
    Text, 
    View, 
    Switch 
} from 'react-native'; 

var SONGS_DATA = { 
    "songs" : [ 
    { 
     "title" : "I Heard React Was Good", 
     "artist" : "Martin", 
     "played" : false 
    }, 
    { 
     "title" : "Stack Overflow", 
     "artist" : "Martin", 
     "played" : false 
    } 
    ] 
} 

class BasicSwitchExample extends Component{ 
    constructor(props){ 
     super(props); 
     this.state = { 
     played: false 
     }; 
     this.handlePlayed = this.handlePlayed.bind(this); 
    } 
    handlePlayed(value){ 
     console.log('handlePlayed value: ' + value); 
     this.setState({played: value}); 
     this.props.callbackParent(value); 
    } 
    render() { 
     return <View> // this has to be on the same line or it causes an error for some reason 
     <Switch 
      onValueChange={this.handlePlayed} 
      style={{marginBottom: 10}} 
      value={this.state.played} /> 
     </View> 
    } 
} 

class AwesomeProject extends Component { 
    constructor(props) { 
    super(props); 
    this.renderSong = this.renderSong.bind(this); 
    this.togglePlayed = this.togglePlayed.bind(this); 
    this.fetchData = this.fetchData.bind(this); 
    this.state = { 
     dataSource: new ListView.DataSource({ 
     rowHasChanged: (row1, row2) => row1 !== row2, 
     }), 
     loaded: false 
    }; 
    } 

    componentDidMount() { 
    this.fetchData(); 
    } 

    togglePlayed(value) { 
    // this is never reached 
    this.setState({played: value}); 
    console.log('Song has been played? ' + this.state.played); 
    } 

    fetchData() { 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(SONGS_DATA.songs), 
     loaded: true, 
    }); 
    } 

    render() { 
    if (!this.state.loaded) { 
     return this.renderLoadingView(); 
    } 

    return (
     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={this.renderSong} 
     style={styles.listView} 
     /> 
    ); 
    } 

    renderLoadingView() { 
    return (
     <View style={styles.container}> 
     <Text> 
      Loading songs... 
     </Text> 
     </View> 
    ); 
    } 

renderSong(song) { 
    let bgStyle = this.state.played ? styles.played : styles.container; 
    console.log('style : ' + bgStyle); // prints 2 for some reason 
    return (
     <View style={this.state.played ? styles.played : styles.container}> 
     <View style={styles.half}> 
      <Text style={styles.title}>{song.title}</Text> 
      <Text style={styles.artist}>{song.artist}</Text> 
     </View> 
     <View style={styles.half}> 
     <BasicSwitchExample callbackParent={this.togglePlayed} /> 
     </View> 
     </View> 
    ); 
    } 
} 

var styles = StyleSheet.create({ 
    container: { 
    /* styles here */ 
    }, 
    played: { 
    /* styles here */ 
    }, 

}); 

AppRegistry.registerComponent('SampleApp',() => AwesomeProject);

React Native Playground

出於某種原因，渲染風格時，它打印出來2。這隻會在應用程序第一次加載時發生，並且在切換開關後永遠不會到達。

來源

2016-04-25 martincarlin87