导航到屏幕太慢。打开一个屏幕几乎需要5秒

Question

当我尝试从登录屏幕导航到主屏幕时，几乎需要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移动设备。

Answer 1

每当我遇到这个问题时，我发现我的图片尺寸太高，我的应用程序试图自己缩小尺寸，导致速度大大减慢。试着缩小你的图片的尺寸，看看这有什么帮助。