ReactXP VirtualListView не отображается на Android - PullRequest
0 голосов
/ 28 ноября 2018

Я пытаюсь включить VirtualListView в мое приложение ReactXP.Веб-версия работает должным образом, но при запуске того же приложения на Android список не отображается.

Я создал минимальный пример, используя следующие основные шаги:

  1. Созданприложение, использующее команду create-rx-app

  2. Создал компонент VirtualListView, используя, главным образом, приведенный ниже пример кода: https://microsoft.github.io/reactxp/docs/extensions/virtuallistview.html

  3. Добавил компонент VirtualListView в мое представление приложений
  4. Запустил приложение, используя npm run start:web и npm run start:android

Почему список не отображается на Android?

Вот как результатвыглядит на Android и в Интернете: Different results on android and web

App.tsx

import React from 'react';
import RX from 'reactxp';
import FruitListView from './FruitListView';

const _styles = {
  main: RX.Styles.createViewStyle({
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  }),

  title: RX.Styles.createTextStyle({
    fontWeight: 'bold',
    fontSize: 36,
    textAlign: 'center',
  }),

  label: RX.Styles.createTextStyle({
    marginTop: 10,
    textAlign: 'center',
    fontSize: 16,
  }),

  name: RX.Styles.createTextStyle({
    fontWeight: 'bold',
    fontSize: 36,
    color: '#42B74F',
  }),

  links: RX.Styles.createViewStyle({
    justifyContent: 'center',
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 10,
  }),

  link: RX.Styles.createLinkStyle({
    textDecorationLine: 'underline',
    paddingRight: 5,
    paddingLeft: 5,
    color: '#0070E0',
  }),
};

export class App extends RX.Component {
  public render() {
    return (
      <RX.View style={ _styles.main }>
        <FruitListView/>
        <RX.View>
          <RX.Text style={ _styles.title }>Welcome to <RX.Text style={ _styles.name }>ReactXP</RX.Text></RX.Text>
          <RX.Text style={ _styles.label }>To get started, edit /src/App.tsx</RX.Text>
        </RX.View>

        <RX.View style={ _styles.links }>
          <RX.Link url={ 'https://github.com/Microsoft/reactxp' } style={ _styles.link }>GitHub</RX.Link>
          <RX.Link url={ 'https://microsoft.github.io/reactxp' } style={ _styles.link }>Docs</RX.Link>
          <RX.Link url={ 'https://github.com/Microsoft/reactxp/tree/master/samples' } style={ _styles.link }>Samples</RX.Link>
          <RX.Link url={ 'https://github.com/Microsoft/reactxp/tree/master/extensions' } style={ _styles.link }>Extensions</RX.Link>
        </RX.View>
      </RX.View>
    );
  }
}

FruitListView.tsx

import * as React from 'react';
import * as RX from 'reactxp';
import { VirtualListView, VirtualListViewItemInfo }
    from 'reactxp-virtuallistview';

// Extend VirtualListViewItemInfo to include display text
interface FruitListItemInfo extends VirtualListViewItemInfo {
    text: string;
}

interface FruitListState {
    items: FruitListItemInfo[];
}

const _headerItemHeight = 20;
const _fruitItemHeight = 32;
const _headerItemTemplate = 'header';
const _fruitItemTemplate = 'fruit';

export class FruitListView extends RX.Component<{}, FruitListState> {
    constructor() {
        super();

        this.state = {
            items: [{
                key: 'header1',
                height: _headerItemHeight,
                text: 'Domstic Fruits',
                template: _headerItemTemplate
            }, {
                key: 'bannana',
                height: _fruitItemHeight,
                text: 'Banana',
                template: _fruitItemTemplate
            }, {
                key: 'apple',
                height: _fruitItemHeight,
                text: 'Apple',
                template: _fruitItemTemplate
            }]
        };
    }

    public render() {
        return (
            <VirtualListView
                itemList={ this.state.items }
                renderItem={ this._renderItem }
                animateChanges={ true }
                skipRenderIfItemUnchanged={ true }
            />
        );
    }

    private _renderItem(item: FruitListItemInfo, hasFocus?: boolean) {
        const viewStyle = RX.Styles.createViewStyle({
            height: item.height,
            backgroundColor: item.template === _headerItemTemplate ?
                '#ddd' : '#fff',
            alignItems: 'center'
        }, false);

        return (
            <RX.View style={ viewStyle }>
                <RX.Text>
                    { item.text }
                </RX.Text>
            </RX.View>
        );
    }
}

export default FruitListView;
...