导航到屏幕太慢。打开一个屏幕大约需要 5 秒答案

【问题标题】：Navigation to the screen is too slow. It takes almost 5 seconds to open a screen导航到屏幕太慢。打开一个屏幕大约需要 5 秒
【发布时间】：2017-12-16 09:26:41
【问题描述】：

当我尝试从登录屏幕导航到主屏幕时，打开主屏幕大约需要 5 秒钟。您单击登录按钮并等待很长时间，直到它导航到主页。有趣的是，只有导航到主页的按钮会导致此问题。我的意思是它仅在您想要导航主页时发生。似乎问题出在主页上。代码如下：

将包含在主屏幕中的组件文件

const Posts = [
  {
    id: 1,
    title: "Lorem Ipsum",
    views: "260 Views",
    comments: "19 Comments",
    published: "14h ago",
    image: require("../img/img1.png"),
  },

...  
];

const Posts = props => {
  return (
    <Content>
      {Posts.map((item, idx) => {
        return <DataContainer {...props} key={idx} item={item} />;
      })}
    </Content>
  );
};



 const DataContainer = ({item, navigation}) => {
  return (
    <Card style={styles.card}>
      <TouchableHighlight onPress={() => navigation.navigate("Post")}>
        <CardItem cardBody>
          <Image
            source={item.image}
            style={styles.img}
          >
            <Text
              style={styles.text}
            >
              {item.title}
            </Text>
          </Image>
        </CardItem>
      </TouchableHighlight>
      <CardItem>
        <Left>
          <Button transparent>
            <Icon
              active
              name="eye"
              style={styles.icon}
            />
            <Text style={{color: '#4286f4'}}>
              {item.views}
            </Text>
          </Button>
        </Left>
        <Body>
          <Button transparent>
            <Icon
              active
              name="chatbubbles"
              style={styles.icon}
            />
            <Text style={{color: '#4286f4'}}>
              {item.comments}
            </Text>
          </Button>
        </Body>
        <Right>
          <Text style={{color: '#4286f4'}}>
            {item.published}
          </Text>
        </Right>
      </CardItem>
    </Card>
  );
};

export default Posts;

主屏幕文件

export default class HomeScreen extends React.Component {
  static navigationOptions = {
    gesturesEnabled: false,
  };

  render() {
    return (
      <Container style={{backgroundColor: '#EEE'}}>
        <CommonHeader {...this.props} />
        <Tabs tabBarUnderlineStyle={{backgroundColor: '#4286f4'}}>
          <Tab
            tabStyle={{backgroundColor: '#EEE'}}
            heading="Popular"
            activeTextStyle={{color: '#4286f4'}}
            '#EEE'Style={{backgroundColor: '#EEE'}}
            textStyle={{color: '#333333'}}
          >
            <Posts {...this.props} />
          </Tab>
          <Tab
            tabStyle={{backgroundColor: '#EEE'}}
            heading="New"
            activeTextStyle={{color: '#4286f4'}}
            Style={{backgroundColor: '#EEE'}}
            textStyle={{color:'#333333' }}
          >
            <Posts {...this.props} />
          </Tab>       
        </Tabs>
      </Container>
    );
  }
}

有什么遗漏吗？为什么加载这么慢？在 ios 和 android 设备上也很慢，但在 Android 移动设备上最慢。

【问题讨论】：

标签： react-native react-native-android react-navigation react-native-ios expo

【解决方案1】：

每当我遇到这个问题时，我都会发现我的图像尺寸太高，而我的应用程序试图自行缩小它们，从而导致速度大大降低。尝试减小图像的尺寸，看看有什么帮助。

【讨论】：

感谢您的回复。您选择什么解决方案来解决它？
您是否单击按钮并等待很长时间才能浏览该屏幕？我问它是因为在其他屏幕上它会立即导航但等待打开图像。虽然在这个问题中，它需要很长时间才能导航到该屏幕。
@Artur 我将我的尺寸从 1931 x 2415 减小到 300 x 375。我的肯定只在那个屏幕上。
对不起，我的意思是说尺寸而不是分辨率。它正在缩小图像，这正在减慢它的速度！我编辑了我的答案以修复我的错误:)
好的，我明白了 ;) 你也在使用 expo 吗？似乎世博会在图像方面遇到了麻烦。