hulajesus hulajesus - 3 months ago 30
iOS Question

listview disappeared after setState({ds})

I am confused with the rerender mechanism of listview.

Page 1 have render a listview with two item, then I click 'Add' button, navigate to another page, and add one item to Page 1's datasource, then navigator back.

What I expect to see is Page 1 with three item, but actually is Page 2, listview is disappeared. But if I use mouse/finger touch it, listView come out again with three item.
I have test it on my iphone and simulator

Page 1's source code:

class Market extends Component {
constructor(props) {
super(props)
this.state = {
dataSource: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }),
}
}

componentDidMount() {
this.refreshListView(this.props.data)
}

componentWillReceiveProps(nextProps) {
this.refreshListView(nextProps.data)
}

refreshListView() {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(data)
})
}

render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
refreshControl={
<RefreshControl/>
}
/>
)
}

const mapStateToProps = createSelector(
selectData(),
(data) => ({
data,
})
)

export default connect(mapStateToProps)(Market)

Answer

Just found something that has fixed mine! try adding removeClippedSubviews={false} to your ListView

https://github.com/facebook/react-native/issues/8607#issuecomment-231371923

Comments