当我更改屏幕时ActivityIndicator不出现
当我更改屏幕时ActivityIndicator不出现
提问于 2019-08-17 21:59:15
我有一个带有列表的视图，其中有45个要加载图像的项目。我希望当您转到此页面时，加载过程中会出现加载。
但是负载没有出现。在显示视图之前，屏幕冻结2秒
我将React导航与TabNavigator结合使用。在菜单中，有一个按钮指向此视图。
我试着放置一个setState，但是它不工作。
我的代码：
class Exhibitors extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true
}
}
componentDidMount() {
InteractionManager.runAfterInteractions(() => {
this.setState({isLoading: false});
});
}
render() {
if (this.state.isLoading) {
return this._displayLoading(); // Simple Activity Indicator
}
// My List
}
_displayLoading() {
return (
<View>
<ActivityIndicator size='large' />
</View>
)
}
}我的印象是，我的应用程序在显示加载之前加载了视图。
目前，当我单击菜单按钮时，屏幕在显示带有列表的视图之前冻结。
现在我希望，只要我点击菜单，新视图就会打开并加载。
回答 1
Stack Overflow用户
发布于 2019-08-17 22:42:58
尝试使用三元运算符。
用法
class Exhibitors extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true
}
}
componentDidMount() {
InteractionManager.runAfterInteractions(() => {
this.setState({isLoading: false});
});
}
render() {
return (
this.state.isLoading === true ? (
<View style={{flex:1,justifyContent: 'center',alignItems:"center"}}>
<ActivityIndicator size="large" color="#0000ff" />
<ActivityIndicator size="small" color="#00ff00" />
</View>
)
:
(
<View ...
)
);
}
}示例
import React, { Component } from 'react'
import {
ActivityIndicator,
StyleSheet,
Text,
View,
} from 'react-native'
export default class App extends Component {
constructor(props) {
super(props);
this.state={
loading: false
}
}
componentDidMount() {
this.setState(state => ({
...state,
loading: true
}));
}
render() {
return (
this.state.loading === false ? (
<View style={[styles.container, styles.horizontal]}>
<ActivityIndicator size="large" color="#0000ff" />
<ActivityIndicator size="small" color="#00ff00" />
</View>
)
:
(
<View style={[styles.container, styles.horizontal]}>
<Text>ActivityIndicator</Text>
</View>
)
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center'
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 10
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57536966
复制相关文章
相似问题
腾讯云开发者
