Question

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

该组件由一个组件实例化，该组件通过react-navigation作为选项卡创建。该组件具有基于本机的组件。 navigation.push（）实例化一个基于反应本机的组件。呈现所需的所有数据都在this.state对象中。调试没有发现任何东西。

然后切换到另一个选项卡可以解决该问题。突出显示选项卡时，在事件处理程序中强制re-rendering（）无效。

我很困惑。

这是代码：

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

提供的道具与我的申请相同。这样就解决了问题。

组件渲染然后消失

1 个答案: