尽管阅读了类似问题的文档和页面,但我似乎无法理解我应该如何实现这一目标。
我有一个项目列表,其中每个项目可以单独显示,使用文本中的名称进行紧凑查看,或者使用图像进行完整查看。我有一个原生的基本图标设置来切换显示选择。我知道它有效,因为它会更新我的视图,如果我点击它并导航并再次返回。
具有视图切换道具的对象数组,以及数据道具
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迫使投降。
答案 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} />;