首页 文章

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

提问于
浏览 次
1

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

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

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

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

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

我尝试使用componentWillReceiveProps，但我不知道如何在我的数据对象中引用props，并且它似乎不能仅使用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强制重新渲染 .

reactjs react-native

1 回答

  • 1

    由于数据是静态的，我不会将其存储在状态中 . 我会将“item”移动到它自己的组件，并使用该组件的状态来指示它是否打开 .

    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} />;
    回复于

相关问题