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 pyarrow.parquet as pq
import pandas as pd

path1 = "f1.pq"
path2 = "f2.pq"

df1 = pd.read_parquet(path1)
df2 = pd.read_parquet(path2)

# This assertion passes
pd.testing.assert_frame_equal(df1, df2)

table1 = pq.read_table(path1)
table2 = pq.read_table(path2)

# This assertion fails
assert table1.equals(table2)

将其导入您的主屏幕，其用法如下：

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

Answer 2

您可以这样做

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 3

反应16.6添加了一个组件，可让您“等待”一些加载并以声明方式指定加载状态的代码（例如微调器），而我们正在等待：

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

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

Documentation

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

3 个答案: