1

我试图在我的 ReactXP 应用程序中包含一个 VirtualListView。网络版本按预期工作，但在 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 和 web 上的样子： android 和 web 上的不同结果

应用程序.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;
4

0 回答 0