如何在 React Native 中从服务器获取数据之前渲染加载器

Question

我正在从我的服务器获取数据，但加载时没有指示器，如何向我的代码添加指示器？ 我想在从服务器获取之前显示加载指示器。 不幸的是，我不确定如何创建一个加载器来等待数据加载。 这是我目前的代码。

这是我的代码

import { SectionList, Alert, ActivityIndicator } from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons';
import styled from 'styled-components/native';
import Swipeable from 'react-native-swipeable-row';
import axios from "axios";

import { Appointment, SectionTitle } from '../components';



const HomeScreen = ({ navigation }) => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const fetchAppointments = () => {
    setIsLoading(true);
    axios.get('https:*********')

    .then(({ data }) => {
      setData(data.data);
      setIsLoading(false);
    });
  }

  useEffect(fetchAppointments, []);
  useEffect(fetchAppointments, [navigation.state.params]);

  return (
    <Container>
     {data && ( <SectionList
          sections={data}
          keyExtractor={item => item._id}
          onRefresh={fetchAppointments}
          refreshing={isLoading}
          renderItem={({ item }) => (
            <Swipeable
              rightButtons={[
                <SwipeViewButton style={{ backgroundColor: '#B4C1CB' }}>
                  <Icon name="md-create" size={28} color="white" />
                </SwipeViewButton>,
                <SwipeViewButton
                  onPress={removeAppointment.bind(this, item._id)}
                  style={{ backgroundColor: '#F85A5A' }}
                >
                  <Icon name="ios-close" size={48} color="white" />
                </SwipeViewButton>
              ]}
            >
                <Appointment navigate={navigation.navigate} item={item} />
            </Swipeable>

        )}
        renderSectionHeader={({ section: { title } }) => (
          <SectionTitle>{title}</SectionTitle>
        )}
        />)}
    </Container>
)};

Answer 1

你可以这样做

import { SectionList, Alert, ActivityIndicator } from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons';
import styled from 'styled-components/native';
import Swipeable from 'react-native-swipeable-row';
import axios from "axios";
import ActivityIndicator from 'react-native';

import { Appointment, SectionTitle } from '../components';

const HomeScreen = ({ navigation }) => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const fetchAppointments = () => {
    setIsLoading(true);
    axios.get('https:*********')

    .then(({ data }) => {
      setData(data.data);
      setIsLoading(false);
    });
  }

  useEEffect(fetchAppointments, []);
  useEffect(fetchAppointments, [navigation.state.params]);

  return (
    <Container>
      {isLoading ? (
        <ActivityIndicator size="large" color="#0000ff" />
      ) : (
        <>
          {data && ( <SectionList
            sections={data}
            keyExtractor={item => item._id}
            onRefresh={fetchAppointments}
            refreshing={isLoading}
            renderItem={({ item }) => (
              <Swipeable
                rightButtons={[
                  <SwipeViewButton style={{ backgroundColor: '#B4C1CB' }}>
                    <Icon name="md-create" size={28} color="white" />
                  </SwipeViewButton>,
                  <SwipeViewButton
                    onPress={removeAppointment.bind(this, item._id)}
                    style={{ backgroundColor: '#F85A5A' }}
                  >
                    <Icon name="ios-close" size={48} color="white" />
                  </SwipeViewButton>
                ]}
              >
                  <Appointment navigate={navigation.navigate} item={item} />
              </Swipeable>

          )}
          renderSectionHeader={({ section: { title } }) => (
            <SectionTitle>{title}</SectionTitle>
          )}
          />)}
        </>
      )}
    </Container>
)};

Answer 2

创建一个返回一些样式活动指示器的功能组件。 像这样的东西：

        <View style={{styles.yourIndicatorStyle}}> //give the position and opacity or whatev you want 
            <ActivityIndicator
                size={"large"}
                color={"green"}
                animating={true} />
        </View>

将其导入您的主屏幕并使用它，例如：

<Container>
 {isLoading && <YourIndicatorComponent />}
  ...
</Container>

Answer 3

React 16.6 添加了一个组件，让你“等待”一些代码加载并在我们等待时声明性地指定加载状态（如微调器）：

const ProfilePage = React.lazy(() => import('./ProfilePage')); // Lazy-loaded

// Show a spinner while the profile is loading
<Suspense fallback={<Spinner />}>
  <ProfilePage />
</Suspense>

文档