import React, {Component} from 'react'
import {TouchableOpacity, StyleSheet, ScrollView, Alert, Image, View, Text} from 'react-native'

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


import LanguageModel, {FLAG_LANGUAGE} from '../../expand/model/LanguageModel';
import NavigatorBar from '../../common/NavigatorBar'
import ArrayUtils from '../../Util/ArrayUtils';
import ViewUtils from '../../Util/ViewUtils';


export default class SortKeyPage extends Component {
    constructor(props) {
        super(props);

        this.dataArray = [];//原始数组
        this.sortResultArray = [];//排序完的数组
        this.originalCheckedArray = [];//筛选后段数组

        this.state = {
            checkedArray: [],//已经订阅数据
        }

        this.languageModel = new LanguageModel(FLAG_LANGUAGE.flag_key);
    }

    componentDidMount() {
        this._loadData();
    }

    /**
     * 获取订阅的数据
     * @private
     */
    _getCheckedItems(result) {
        this.dataArray = result;
        let checkedArray = [];
        for (let i = 0, j = result.length; i < j; i++) {
            let data = result[i];
            if (data.checked)checkedArray.push(data);
        }
        this.setState({
            checkedArray: checkedArray
        })
        this.originalCheckedArray = ArrayUtils.clone(checkedArray);
    }

    /**
     * 加载数据
     * @private
     */
    _loadData() {
        this.languageModel.get().then(result => {
            this._getCheckedItems(result);
        }).catch(error => {
            console.log(error);
        })
    }

    _goBack() {
        this.props.navigator.pop();
    }

    render() {
        return <View>
            <NavigatorBar
                title={'标签排序'}
                leftButton={ViewUtils.getLeftButton(() => this._goBack())}
            />
            <SortableListView
                style={{flex: 1, backgroundColor: 'red'}}
                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 => <RowComponent data={row}/>}
            />
        </View>
    }
}

class RowComponent extends Component {
    render() {
        return <View>
            <Text>{this.props.data.name}123</Text>
        </View>
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    },
    buttonView: {
        marginLeft: 10,
        marginRight: 10,
    },
    buttonText: {
        fontSize: 18,
        color: 'white',
    },
    group: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    groupLine: {
        height: 0.3,
        backgroundColor: 'darkgray',
    },
    checkbox: {
        flex: 1,
        padding: 10,
    },
    icon_image: {
        width: 20,
        height: 20,
        tintColor: '#6495ED'
    }
})

我按照老师写的，然后页面一片空白，应该是我哪里写的不对吧，但是我找不到原因呢，我调试数据了，里面是有值的。但是页面不显示，一般有哪些情况呢？