Question

所以我正在渲染一个包含两列项目的ListView。以下函数呈现行renderRow（rowData）：

对于每个项目，如果单击，我希望将其更改为0.5的不透明度，如果再次单击，则希望它返回以清除不透明度，所以我想的是将其设置为1.0的不透明度。 / p>

我尝试了以下操作，但出于某种原因，不透明度未更新：

  constructor(props){
    super(props);

    this.state = {
      opacity: 1.0,
      selected: false,
    }
  }

  renderRow(rowData){
    return (
          <View style={styles.item}>
            <TouchableHighlight onPress={()=>this._selected() underlayColor='transparent'}>
              <View style={{opacity:this.state.opacity}}>
                <Text>{rowData.firstName}</Text>
                <Text>{rowData.lastName}</Text>
              </View>
            </TouchableHighlight>
          </View>
    )
  }

  _selected(){
    if(this.state.selected){
      console.log('ITEM HAS BEEN UNSELECTED')
      this.setState({
        opacity: 1.0,
        selected: false
      })
    }else{
      console.log('ITEM HAS BEEN SELECTED')
      this.setState({
        opacity: 0.5,
        selected: true
      })
    }
  }

点击并重新渲染TouchableHighlight中的视图后，为什么不更新不透明度？另外，我如何使用单个项目，每个人的不透明度＆＃39;和＃39;选择＆＃39;状态？

**完整代码

'use strict';

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

class Interest extends Component {
  constructor(props){
    super(props);

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

    this.state = {
      selected: false,
      dataSource: ds.cloneWithRows([
      {firstName: 'Johnny', lastName: 'Boy'},
      {firstName: 'Shawn', lastName: 'Ke'},
      {firstName: 'An', lastName: 'Twon'}
    };
  }

  renderRow(rowData){
    return (
          <View style={this.state.selected ? styles.transItem : styles.opacItem}>
            <TouchableHighlight
              onPress={ () => { this.setState({selected: !this.state.selected})}} underlayColor='transparent'>
              <View>
                <Text>{rowData.firstName}</Text>
                <Text>{rowData.lastName}</Text>
              </View>
            </TouchableHighlight>
          </View>
    )
  }

  render() {
    return (
      <View style={styles.container}>
        <ListView contentContainerStyle={styles.list} dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  list: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  opacItem: {
    margin: 15,
    width: 155,
    height: 175,
    opacity: 1.0
  },
  transItem: {
    margin: 15,
    width: 155,
    height: 175,
    opacity: 0.5
  }
});

export default Interest

Answer 1

我认为您设置的选定状态不是您想要的。

在上面的代码中，所选的是整个应用程序的状态 - 不仅仅是选定的行。要选择单行，您应该为每个项目保持选定状态。对于更干净的代码，建议为该项目使用另一个模块，并保持状态而不是父模块。

代码：

'use strict';

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

class Interest extends Component {
  constructor(){
    super();
    this._renderRow = this._renderRow.bind(this);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

    this.state = {
      dataSource: ds.cloneWithRows([
        {firstName: 'Johnny', lastName: 'Boy'},
        {firstName: 'Shawn', lastName: 'Ke'},
        {firstName: 'An', lastName: 'Twon'}
      ])};
    }

    render() {
      return (
        <View style={styles.container}>
          <ListView
            contentContainerStyle={styles.list}
            dataSource={this.state.dataSource}
            renderRow={this._renderRow}
          />
        </View>
      );
    }

    _renderRow(rowData) {
      return(
        <InterestItem rowData={rowData} />);
    }
  }

  class InterestItem extends Component {
    constructor(props){
      super(props);
      this.state = {
        selected: false
      }
    }

    render(){
      const { rowData } = this.props;
      return (
        <View style={this.state.selected ? styles.transItem : styles.opacItem}>
          <TouchableHighlight
            onPress={ () => { this.setState({selected: !this.state.selected})}}
            underlayColor='transparent'
          >
            <View>
              <Text>{rowData.firstName}</Text>
              <Text>{rowData.lastName}</Text>
            </View>
          </TouchableHighlight>
        </View>
      )
    }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1
    },
    list: {
      flexDirection: 'row',
      flexWrap: 'wrap',
    },
    opacItem: {
      margin: 15,
      width: 155,
      height: 175,
      opacity: 1.0
    },
    transItem: {
      margin: 15,
      width: 155,
      height: 175,
      opacity: 0.5
    }
  });

  export default Interest

如何通过React Native中的TouchableOpacity更新一次onPress状态？

1 个答案: