React-Native Listview, 행을 누르고 해당 행 스타일을 변경하십시오.

Question

가로 목록보기가 있으며 행을 누르고 행 스타일을 변경하려고합니다. (선택된 행 : 스타일 행 변경, 선택되지 않은 행 : 기본 스타일로 변경). 나는 그것의 행에 touchable 하이라이트를 사용합니다. 그것을위한 어떤 제안? 나는 이미 약 3 일 동안 검색하려고합니다. 그러나 나는 아직도 그것을 잡지 못한다. 진급 감사드립니다.

class MatchSchedule extends Component { 

constructor(props) { 
    super(props); 
    const ds = new ListView.DataSource({ 
     rowHasChanged: (r1, r2) => r1 !== r2, 
    }); 
    this.state = { 
     dataSource: ds.cloneWithRows(this._getWeekList()), 
     selectedID: 'Week 3', 
    }; 
    render() { 
     return (
     <View style={styles.container}> 
      <View style={styles.weekContain}> 
       <ListView 
        showsHorizontalScrollIndicator={false} 
        horizontal={true} 
        dataSource={this.state.dataSource} 
        renderRow={this._renderRow.bind(this)} 
       > 
       </ListView> 
      </View> 
     </View> 
    );} 
    _renderRow(rowData, rowID) { 
    return (
     <TouchableHighlight onPress={() => { 
      this._selectedWeek(rowData, rowID) 
     } 
     } 
     > 
      <View style={this.state.selectedID == rowData ? styles.weekRowSelected : styles.weekRow}> 
       <Text style={this.state.selectedID == rowData ? styles.weekTextSelected : styles.weekText}> {rowData} </Text> 
      </View> 
     </TouchableHighlight> 
    ); 
} 
_selectedWeek(rowData, rowID) { 
    this.setState({ 
     selectedID: rowData, 
     dataSource: this.state.dataSource.cloneWithRows(newDs) 
    }); 
} 
} 

나는 또한 listview를 다시 렌더링하려고 시도하지만 여전히 할 수 없습니다. 나는 새로운 반응 네이티브입니다.

Answer 1

안녕 Leang 시작하는 코드 아래에이 스레드 React native: change style of ListView item on touch 사용을 참조

class ListExample extends React.Component { 

    constructor(props) { 
    super(props); 
    const ds = new ListView.DataSource({ 
     rowHasChanged: (r1, r2) => r1 === r2 
    }); 
    this.state = { 
     dataSource: ds.cloneWithRows(this._getWeekList()), 
     selectedID: 'tues' 
    } 
    } 

    _getWeekList =() => { 
    return ["monday", "tues", "wed", "thurs"] 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <View style={styles.weekContain}> 
      <ListView showsHorizontalScrollIndicator={false} horizontal={true} dataSource={this.state.dataSource} renderRow={this._renderRow.bind(this)}></ListView> 
     </View> 
     </View> 
    ); 
    } 
    _renderRow(rowData, rowID) { 
    return (
     <TouchableHighlight onPress={() => { 
     this._selectedWeek(rowData, rowID) 
     }}> 
     <View style={this.state.selectedID == rowData 
      ? styles.weekRowSelected 
      : styles.weekRow}> 
      <Text style={this.state.selectedID == rowData 
      ? styles.weekTextSelected 
      : styles.weekText}> 
      {rowData} {this.state.selectedID} 
      </Text> 
     </View> 
     </TouchableHighlight> 
    ); 
    } 
    _selectedWeek(rowData, rowID) { 
    console.log('Selected week '+rowData); 
    this.setState({selectedID: rowData, dataSource: this.state.dataSource.cloneWithRows(this._getWeekList())}); 
    } 
} 

var styles = StyleSheet.create({ 
    weekRowSelected : { 
    }, 
    weekRow: { 
    }, 
    weekTextSelected: { 
    fontSize: 16, 
    color: 'yellow', 
    }, 
    weekText: { 
    fontSize: 14, 
    color: 'blue', 
    } 
}) 

Leang 당신이 말한 여기에

const ds = new ListView.DataSource({ 
     rowHasChanged: (r1, r2) => r1 !== r2, 
    }); 

을 추가 한 코드의 목록을 다시 렌더링에 반응보고 데이터가 변경되는 경우에만 변경되는 반면 변경되지는 않습니다. 당신이 자신을 당신의 DS를 수정하고 다음을 통과하거나이 코드를 시도

const ds = new ListView.DataSource({ 
     rowHasChanged: (r1, r2) => r1 === r2, 
    }); 

에 위의 조건을 변경하거나 가지고 작동 작동하게합니다. 잘하면 도움이됩니다.