导航到屏幕太慢.打开屏幕需要将近5秒钟

当我尝试从标志屏幕到主屏幕时，打开主屏幕需要将近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移动设备上。

每当我遇到这个问题时，我发现我的图像的尺寸太高，我的应用程序试图自行扩展它们，从而导致巨大的放缓。尝试降低图像的尺寸并查看如何有所帮助。

相关内容

最新更新

热门标签：