如何使用React Native在屏幕中间显示加载进度或微调器？

Question

我正在开发React Native应用程序。

我能够自己解决所有问题，但这是例外。我要使用底部标签导航器加载另一个屏幕。

例如，用户登录到应用程序后，它应显示主屏幕，其中包含许多图片和样式表效果，图标。因此，登录确认后（我的意思是登录确认警报后），几秒钟后出现主主页屏幕。

因此，我想在后台加载主主屏幕时在登录屏幕中显示一些微调器，当它准备显示时，请擦除微调器并显示主主屏幕。我该怎么办？

我的底部标签导航器只是使用createBottomTabNavigator()方法创建的。

Answer 1

import { ActivityIndicator } from 'react-native';

export default class LoginScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            spinner : true
        }
    }
    render() {
        return (
        <View style={{flex : 1, justifyContent: 'center', alignItems: 'center',}}>
        {
          this.state.spinner &&
          <ActivityIndicator  color={'#fff'} />
        }
        </View>
        )
    }
}

Answer 2

例如：

import {View, ActivityIndicator } from 'react-native';

export default class MainScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            spinner : true
        }
    }

componentDidMount(){
this.loadApi();
}

loadApi = async() => {
let result = axios.get('url').then((data) =>{
this.setState({spinner:false});
}
).catch((err) => this.setState({spinner:false})
}

    render() {
        return (
        <View style={{flex : 1, justifyContent: 'center', alignItems: 'center',}}>
        {
          this.state.spinner? <ActivityIndicator  color={'#fff'} />:<View><Text>Data loaded</Text></View>

        }
        </View>
        )
    }
}

Answer 3

您可以使用React Native Activity Indicator-> View

您可以使用叠加库-> react-native-loading-spinner-overlay-> View GitHub
1. 如果您希望像facebook / instagram一样进行加载->然后使用react-native-easy-content-loader-> View GitHub

假设您正在使用React Native Activity Indicator：

import { ActivityIndicator } from "react-native";

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

  //Get Home Screen Data API Action
  componentDidMount() {
    this.loadAPI(); // Call home screen get data API function
  }

  //Login API Function
  loadAPI = () => {
    this.setState({ isLoading: true }); // Once You Call the API Action loading will be true
    fetch(API_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      }
    })
      .then(response => response.json())
      .then(responseText => {
        // You can do anything accroding to your API response
        this.setState({ isLoading: false }); // After getting response make loading to false
      })
      .catch(error => {});
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        {this.state.isLoading && <ActivityIndicator color={"#fff"} />}
      </View>
    );
  }
}

如果要隐藏所有视图，直到像图像一样加载完成，则可以使用自定义库代替活动指示器。