Я пытаюсь включить VirtualListView в мое приложение ReactXP.Веб-версия работает должным образом, но при запуске того же приложения на Android список не отображается.
Я создал минимальный пример, используя следующие основные шаги:
Созданприложение, использующее команду create-rx-app
Создал компонент VirtualListView, используя, главным образом, приведенный ниже пример кода: https://microsoft.github.io/reactxp/docs/extensions/virtuallistview.html
- Добавил компонент VirtualListView в мое представление приложений
- Запустил приложение, используя
npm run start:web
и npm run start:android
Почему список не отображается на Android?
Вот как результатвыглядит на Android и в Интернете:
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;