У меня есть относительно простой компонент, который корректно отображается на iOS, но не на Android.Компонент отображается так, что верхняя часть экрана исчезает.Я уверен, что компонент отображается, но кажется, что подкомпоненты исчезают или покрываются чем-то.Учитывая, что анимация, которая происходит (быстро), выглядит как затухание, я думаю, что компоненты все еще там.
Компонент создается компонентом, который создается реагирующей навигацией как вкладка.Этот компонент имеет базовые компоненты.Navigation.push () создает компонент, основанный на реакции.Все данные, необходимые для визуализации, находятся в объекте this.state.Отладка ничего не показывает.
Переключение на другую вкладку и возврат назад решает проблему.Принудительное повторное отображение () в обработчике событий, когда вкладка находится в фокусе, не действует.
Я в тупике.
Это код:
import React, { Component } from 'react';
import {
Image,
} from 'react-native';
import {
Container,
Content,
Body,
Header,
Left,
Right,
Thumbnail,
ListItem,
List,
Text,
Button,
Footer,
FooterTab,
Card,
CardItem,
} from 'native-base';
import QRCode from 'react-native-qrcode';
export default class UnitDetailScreen extends Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Unit Details',
headerRight: <Button onPress={
() => {
navigation.navigate(
'UnitInstallation',
{ item: navigation.getParam('item') }
)
}
}>
<Text>Edit</Text>
</Button>,
}
};
state = {
};
componentDidMount() {
const navigation = this.props.navigation;
const item = navigation.getParam('item');
this.setState({ item: item, navigation: navigation });
}
getBatteryImage(item) {
return { uri: 'battery-green.png' };
}
render() {
if (this.state.item === undefined) {
return <Text>loading...</Text>;
}
// ok, now this is really wierd... the item is actually pointing to a row when this method called so we can't use getParam('item')
const rowStyle = {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
marginLeft: 10,
marginRight: 10,
padding: 10,
borderBottomColor: '#888'
};
const noPhoto = { uri: 'no-photo.png' }
return <Container>
<Content>
<Card>
<CardItem>
<Left>
<Thumbnail source={noPhoto} />
<Body>
<Text>Big Bad Machine</Text>
<Text note>The Lab</Text>
</Body>
</Left>
</CardItem>
</Card>
<Card>
<CardItem bordered>
<Image style={{
flex: 1,
height: 30,
width: undefined,
resizeMode: 'contain'
}} source={this.getBatteryImage(this.state.item)} />
</CardItem>
<CardItem>
<Left><Text style={{ fontWeight: 'bold' }}>Installed</Text></Left>
<Right><Text>{this.state.item.unit.installDate}</Text></Right>
</CardItem>
<CardItem>
<Left><Text style={{ fontWeight: 'bold' }}>Model</Text></Left>
<Right><Text>The model</Text></Right>
</CardItem>
<CardItem>
<Left><Text style={{ fontWeight: 'bold' }}>Serial</Text></Left>
<Right><Text>{this.state.item.unit.serialNumber}</Text></Right>
</CardItem>
<CardItem>
<Left><Text style={{ fontWeight: 'bold' }}>Purchased</Text></Left>
<Right><Text>{this.state.item.unit.purchaseDate}</Text></Right>
</CardItem>
<CardItem>
<Left><Text style={{ fontWeight: 'bold' }}>Installation</Text></Left>
<Right>
<Thumbnail square source={noPhoto} />
</Right>
</CardItem>
<CardItem>
<Left><Text style={{ fontWeight: 'bold' }}>QR Code</Text></Left>
<QRCode
value={this.state.item.unit.id}
size={80}
/>
</CardItem>
<CardItem>
<Left><Text style={{ fontWeight: 'bold' }}>Serial</Text></Left>
<Right><Text>{this.state.item.unit.serialNumber}</Text></Right>
</CardItem>
<CardItem>
<Left><Text style={{ fontWeight: 'bold' }}>ID</Text></Left>
<Right><Text>{this.state.item.unit.id}</Text></Right>
</CardItem>
</Card>
</Content>
<Footer>
<FooterTab>
<Button bordered light>
<Text>Photos/Notes</Text>
</Button>
<Button bordered light>
<Text>Installation Media</Text>
</Button>
</FooterTab>
</Footer>
</Container>
}
}
Первоначальный рендер: 
Навигация прочь: 
Навигация назад: 