React Native:在行项目上按下切换按钮时重新呈现FlatList

时间:2018-03-03 00:02:46

标签: reactjs react-native

尽管阅读了类似问题的文档和页面,但我似乎无法理解我应该如何实现这一目标。

我有一个项目列表,其中每个项目可以单独显示,使用文本中的名称进行紧凑查看,或者使用图像进行完整查看。我有一个原生的基本图标设置来切换显示选择。我知道它有效,因为它会更新我的视图,如果我点击它并导航并再次返回。

具有视图切换道具的对象数组,以及数据道具

data[{imgView: false, data:data}, {...}]

数据是静态的,唯一的变化是显示内容的过滤器。 我尝试过使用extraData道具,但我无法正常使用它。如果我将它与状态属性一起使用它会出错,因为在我需要执行setState的地方是渲染函数,这显然不会起作用。我尝试制作一个全局变量来引用,但它没有做任何事情。我不知道如何在我的行项目中引用道具来使用它。

我尝试过使用componentWillReceiveProps,但我不知道如何在我的数据对象中引用道具,而且它似乎只使用了一个setState调用而没有用于测试的检查。

我想做的是:
按行项目中的按钮 - >仅切换该行项目的视图属性 切换的行项目属性 - >触发重新呈现列表

编辑:添加一些代码

constructor(props) {
  super(props);
  this.state = {
    data: result,
    update: false
  };
};

_renderItem = ({item}) => {
  return (
    <Image source={item.imgView ? 
      images[item.data.imgFull] : 
      images[item.data.name]} 
      style={{flex:1}}
    />
    <Icon name="arrow-dropdown" 
      style={{color:'black'}}
      onPress ={() => {item.imgView = !item.imgView}}
    />
  );
);

render() {
  return (
    <FlatList
      data={this.state.data}
      extraData={this.state.update}
      keyExtractor={(item, index) => index} //to remove warning for now
      renderItem={this._renderItem}
    />
  );
};

我不知道我是否正确地解决了这个问题,但是当调用_renderItem函数的图标组件中的onPress时,我想切换state.update以便extraData迫使投降。

1 个答案:

答案 0 :(得分:1)

由于数据是静态的,我不会将其存储在状态中。我会移动&#34;项目&#34; out到它自己的组件并使用该组件的状态来指示它是否打开。

export default class ListItem extends Component {
  constructor() {
    this.state = {
      open: false,
    }
  }

  toggleView = () => {
    const { open } = this.state;
    this.setState(() => ({ open: !open });
  }

  render() {
    const { item } = this.props;
    const { open } = this.state;

    return (
      <Image source={open ? 
        images[item.data.imgFull] : 
        images[item.data.name]} 
        style={{flex:1}}
      />
      <Icon name="arrow-dropdown" 
        style={{color:'black'}}
        onPress ={this.toggleView}
      />
    );
  }
}

 // In your current List component
_renderItem = ({item}) => <ListItem item={item} />;