SortableListView渲染不出来

来源:5-10 Popular(最热)模块的标签排序功能实现-1

慕无忌King

2018-09-21

已经导入相应的包

import SortableListView from 'react-native-sortable-listview'

render方法

 render() {
        return (
            <View >
                <NavigationBar
                    title={'标签排序'}
                    style={{
                        backgroundColor:'#6495ed'
                    }}
                />
                <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]);
                    }}
                    renderRow={(row)=> <SortCell data={row}/>}
                />
            </View>
        );
    }

sortCell


class SortCell extends Component {

    render() {
        let name = this.props.data.name;
        console.log(name)
        return (
            <View>
                <Text>{name}</Text>
            </View>
        );
    }
}

找了半天,并没有出错的地方,直到在跟视图的view加上style={{flex:1}},
SortableListView的style={{flex:1}}以后才显示出来,这是为什么呢
修改后的render方法

render() {
        return (
	        //加上了style:flex:1
            <View style={{flex: 1}}>
                <NavigationBar
                    title={'标签排序'}
                    style={{
                        backgroundColor:'#6495ed'
                    }}
                />
                <SortableListView
	                //也加上了style:flex:1
                    style={{flex:1}}
                    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]);
                    }}
                    renderRow={(row)=> <SortCell data={row}/>}
                />
            </View>
        );
    }
写回答

2回答

路程

2018-10-20

我感觉应该是老版Rn 的坑 ,在Android上用布局工具查看,如果顶层View 没有设置 flex ,根本连这个View js中代码所表示的<View>  在安卓中是ViewGroup, 都没有加入 到布局视图。

0
0

遍地_狼烟

2018-09-24

用fastlist


0
0

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

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

1577 学习 · 727 问题

查看课程