React-native:如何在滑动时更改行的内容或样式？

Question

当滑动项目会导致背景颜色和图标大小发生变化时，我希望拥有类似于 Google Inbox ( demo ) 的功能。

我的实现的 ListView 为 Swipeable组件作为行，我想根据滑动位置更改行的内容或样式(例如在右 Pane 中)。 为了让 ListView 在滑动时重新渲染，我添加了一个 pos 状态，并使用 Swipeable 的 onPanAnimatedValueRef 属性进行设置。

问题是 ListView 不会重新渲染，也没有任何变化。

<ListView
    ...
    renderRow={(data) => (
                <Swipeable rightContent={
                        <View><Text>{this.state.pos}</Text></View>
                    }
                    ...
                    onPanAnimatedValueRef={(pan) => { 
                        pan.addListener(val => {
                            this.setState({
                                pos: val.x
                            });
                    }}>
                    {data}
                </Swipeable>
    )}
/>

你觉得这有什么问题吗？

Answer 1

我会将 Swipeable 包装在您自己的组件中，在那里保持状态和动画逻辑。 ListView 没有责任重新呈现整个内容，因为数据没有改变，只是行本身发生了变化。

或者，您可以通过 setState 将数据更改为 ListView 的数据源(大概是基于状态的，因此强制重新渲染，但这是一个较少的方法)有效路径)