Question

当我尝试从Signin屏幕导航到主屏幕时，打开主屏幕需要将近5秒钟。您单击登录按钮并等待，直到它将导航到主页。有趣的是，只有导航到主页的按钮才会导致此问题。我的意思是只有当您想要浏览主页时才会发生这种情况。似乎问题在于Home Page。这是代码：

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

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

每当我遇到这个问题时，我发现我的图片尺寸过高而且我的应用程序试图将它们自行缩小，造成巨大的减速。尝试减小图像的尺寸，看看它有多大帮助。

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

1 个答案: