组件渲染然后消失

Question

我有一个相对简单的组件，可以在iOS上正常呈现，但不能在Android上呈现。该组件似乎呈现，然后屏幕的前1/2逐渐消失。我确定该组件已呈现，但看起来子组件正逐渐淡出或被某些东西覆盖。鉴于发生（快速）的动画看起来像一个淡入淡出，我认为组件仍然存在。

该组件由一个组件实例化，该组件由react-navigation作为选项卡创建。该组件具有基于本机的组件。 navigation.push（）实例化基于react-native的组件。渲染所需的所有数据都在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>
  }
}

初始渲染：

导航：

导航回来：

Answer 1

我使用组件的SVG版本修复了问题：

npm install react-native-qrcode-svg --save

供应的道具与我的应用程序相同。这解决了这个问题。

组件渲染然后消失

问题描述投票：2回答：1

1个回答

最新问题

组件渲染然后消失

问题描述 投票：2回答：1

1个回答

最新问题

问题描述投票：2回答：1