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

Question

我想要一个类似于 Google 收件箱 (demo) 的功能，当滑动项目时会导致图标的背景颜色和大小发生变化。

我的实现有一个 ListView 的 Swipeable 组件作为行，我想根据滑动位置更改行的内容或样式（例如在右窗格中）。为了让 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 的数据源（可能基于状态，因此强制重新渲染，但这是一个效率较低的路径）

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

React-native: how to change row's content or style while swiping?

swipe

react-native