当我尝试从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移动设备上。
每当我遇到这个问题时，我发现我的图像尺寸过高，我的应用程序试图将它们自行缩小，造成巨大的减速。尝试减小图像的尺寸，看看它有多大帮助。