组件渲染然后消失答案

【问题标题】：Components Render then Disappear组件渲染然后消失
【发布时间】：2019-03-01 20:22:52
【问题描述】：

我有一个相对简单的组件，它可以在 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>
  }
}

初始渲染：

离开：

【问题讨论】：

请添加图片和代码。你所说的在我们的脑海中很难调试。
对不起...很难找到要发布的摘录。我使用 native-base 重建了组件，没有任何 react-native 组件。我正在使用：react-native-qrcode 渲染 QRCode，这似乎是导致问题的组件。我会发布图片和代码。

标签： react-native react-navigation native-base

【解决方案1】：

我使用组件的 SVG 版本解决了这个问题：

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

要提供的道具对于我的应用程序是相同的。这样就解决了问题。

【讨论】：