[英]Why React Native FlatList style not change with state
I have some tabs. 我有一些标签。 I want to change the color of the selected tab.
我想更改所选标签的颜色。 I created a state for selected tab index which will hold the tab ID.
我为选定的选项卡索引创建了一个状态,它将保存选项卡ID。 When Tab is pressed the selected state change to the pressed tab ID.
按Tab键时,所选状态将更改为按下的选项卡ID。 I am comparing the selected state to tab ID.
我正在将选定的状态与选项卡ID进行比较。 If both are equal then the selected tab will have some different style.
如果两者相等,则所选选项卡将具有一些不同的样式。
But when state changes and condition is true, the selected tab is not changing its state. 但是当状态更改和条件为真时,所选选项卡不会更改其状态。 Why change in state do not trigger the comparison in the style to update the style?
为什么改变状态不会触发样式中的比较以更新样式?
<FlatList horizontal data={this.state.drinkgroup} showsHorizontalScrollIndicator={false} renderItem={({item, index}) => { return <Tab item={item} selected={this.state.selected} changeSelected={ () => { this.setState({selected: item.id}, function(){ console.log(this.state.selected, item.id) console.log(this.state.selected==item.id) }) }} } } />
export const Tab = ({item, selected, changeSelected}) => { return ( <TouchableOpacity style={[styles.tabStyle, (selected==item.id)? styles.tabSelectedStyle: null]} onPress={changeSelected} underlayColor='#fff' > <Text style={{color: '#f2f2f2', textAlign: 'center', fontSize: 15}}>{item.name}</Text> </TouchableOpacity> ); }
const styles = StyleSheet.create({ tabStyle: { backgroundColor: '#800080', height: 32, paddingRight: 15, paddingLeft: 15 }, tabSelectedStyle: { borderBottomColor: 'white', borderBottomWidth: 3 } })
By passing extraData={this.state} to FlatList
we make sure FlatList itself will re-render when the state.selected changes. 通过将extraData = {this.state}传递给
FlatList
我们确保当state.selected更改时,FlatList本身将重新呈现。 Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes. 如果不设置此prop,FlatList将不知道它需要重新渲染任何项目,因为它也是PureComponent,并且prop比较不会显示任何更改。
<FlatList
data={this.props.data}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
This is a PureComponent which means that it will not re-render if props remain shallow- equal. 这是一个PureComponent,这意味着如果道具保持浅层相等,它将不会重新渲染。
Make sure that everything your renderItem function depends on is passed as a prop (eg extraData) that is not === after updates, otherwise your UI may not update on changes. 确保renderItem函数所依赖的所有内容都作为prop(例如extraData)传递,更新后不是===,否则您的UI可能无法更新更新。
This includes the data prop and parent component state. 这包括数据支柱和父组件状态。
You need to provide extraData
prop to the Flatlist, if you want it to re render its items. 如果要重新呈现其项目,则需要向
extraData
提供extraData
prop。 You can do it like extraData={this.state}
. 你可以像
extraData={this.state}
那样做。
By passing extraData={this.state}
to FlatList
we make sure FlatList
itself will re-render when the state.selected
changes. 通过将
extraData={this.state}
传递给FlatList
我们确保当state.selected
更改时, FlatList
本身将重新呈现。 Without setting this extraData
prop, FlatList
would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes. 如果没有设置这个
extraData
prop, FlatList
就不会知道它需要重新渲染任何项目,因为它也是一个PureComponent,并且prop比较不会显示任何变化。 For further details you can visit official documentation here 有关详细信息,请访问此处的官方文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.