react-native-sortable-listview不work

来源:

oog

2017-03-13

老shi你好,我现在用的0.42版本的RN,其他的配置跟你相同,但是我的react-native-sortable-listview中的元素无法拖拽,但有滑动效果,一拖动就整体页面拖动了。代码如下。更新:尝试过降级RN到4.0,升级该插件包等动作,无效果。下面是sort的元素

class SortComponent extends Component{

    render(){
        console.log("props:"+this.props.data)
        return (
            <TouchableHighlight
                underlayColor={'#eee'}
                delayLongPress={500}
                style={{padding: 25, backgroundColor: "#F8F8F8", borderBottomWidth:1, borderColor: '#eee'}}
                {...this.props.sortHandlers}
            >
                <View style={{marginLeft: 10, flexDirection: 'row'}}>
                    <Image source={require('./img/ic_sort.png')} resizeMode='stretch' style={[{
                        opacity: 1,
                        width: 16,
                        height: 16,
                        marginRight: 10,
                    }]}/>
                    <Text>{this.props.data.name}</Text>
                </View>
            </TouchableHighlight>
        )
    }
}

这里是引用组件

<View style={styles.container}>
    {navigationBar}
    <SortableListView
        style={{flex: 1}}
        data={this.state.checkedArray}
        order={Object.keys(this.state.checkedArray)}
        onRowMoved={(e)=> {
            order.splice(e.to, 0, order.splice(e.from, 1)[0]) //from,to, and row
            this.forceUpdate()
        }}
        renderRow={row => <SortComponent data={row} {...this.props}/>}
    />
</View>


写回答

1回答

CrazyCodeBoy

2017-03-13

将order.splice(e.to, 0, order.splice(e.from, 1)[0]) 改为this.state.checkedArray.splice(e.to, 0, this.state.checkedArray.splice(e.from, 1)[0]);

如:

<View style={styles.container}>
    {navigationBar}
    <SortableListView
        data={this.state.checkedArray}
        order={Object.keys(this.state.checkedArray)}
        onRowMoved={(e) => {
            this.state.checkedArray.splice(e.to, 0, this.state.checkedArray.splice(e.from, 1)[0]);
            this.forceUpdate();
        }}
        renderRow={row => <SortCell data={row} {...this.props}/>}
    />
</View>


0
0

React Native技术精讲与高质量上线App开发

一个真实的上线项目,一次完整的开发过程,全面掌握React Native技术

1577 学习 · 727 问题

查看课程