react-native - 使用 react-native-offline 连接互联网时不显示任何内容

Question

我正在使用 react-native-offline 模块。我的目的是在没有连接时显示一些错误。当互联网关闭时，我正在使用 withNetworkConnectivity 显示一些红色文本。这是我的代码:

import React from 'react';
import { View, Text } from 'react-native';
import { withNetworkConnectivity } from 'react-native-offline';

const ConnectionStatus = ({ isConnected }) => (
  <View style={styles.viewStyle}>
    <Text style={styles.textStyle}>{isConnected ? '' : 'You are offline. Make sure your device is connected'}</Text>
  </View>
);

const styles = {
  viewStyle: {
    height: 20,
    marginTop: 20,
    alignItems: 'center',
    flex: 0.1
  },
  textStyle: {
    alignSelf: 'center',
    color: 'red',
    fontSize: 20,
  }
};

export default withNetworkConnectivity()(ConnectionStatus);

然而问题是，即使有互联网，顶部 View 标签所代表的空间仍然存在。如何确保我的组件仅在没有连接时占用空间？

Answer 1

您必须有选择地呈现您的文本组件。

const renderText = () => {
    if (!isConnected) { 
        return <Text> Your error Text </Text>;
    }
};

const ConnectionStatus = ({ isConnected }) => (
  <View style={styles.viewStyle}>
    {renderText()}
  </View>
);