Question

在React Native中，我正在加载一个本地JSON文件，数据作为数组通过导入（然后改组数组），但是会在AppLoading阶段发生这种情况，而不是在AppLoading之后，当我我试图渲染主应用程序。

在当前状态下，App在App Loading屏幕后读取本地JSON文件需要很长时间，而不是DURING（我在应用程序加载屏幕之后，但在应用程序主体之前有'介绍滑块'。这可能吗？

这是我的代码（缩写）：

  import React, { Component } from 'react';
  import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    Dimensions,
    Alert
  } from 'react-native';
  import { Font } from 'expo';
  import CardStack, { Card } from 'react-native-card-stack-swiper';
  import AppIntroSlider from 'react-native-app-intro-slider';

  import imagedata from './assets/cleaned_imagesdata.json'; 
  //Here is where I'm importing in data from a local JSON


  var shuffle = require('shuffle-array'),
    collection = imagedata;

  shuffle(collection);

  export default class App extends Component<{}> {
    constructor(props) {
      super(props);
      this.state = {
        fontLoaded: false,
        showRealApp: false
      };
    }

    async componentDidMount() {
      await Font.loadAsync({
        'proxima-nova': require('./assets/fonts/proxima-nova-soft-light-webfont.ttf'),
        'proxima-nova-bold': require('./assets/fonts/ProximaNovaBold.ttf')
      });

      this.setState({fontLoaded: true});
    }

    _onDone = () => {
      this.setState({showRealApp: true});
    };

    render() {

      if (!this.state.fontLoaded) {
        return <Expo.AppLoading />; //THIS IS THE PART
      }

      if (this.state.showRealApp) {
        const contents = collection.map((item, index) => {
          return (
              <Card key={index}>
                ....
              </Card>
          )
        });

        return (
            <View style={{flex:1}}>
             ....
             {contents}
             ....
            </View>
        );
      } else {
        return <AppIntroSlider slides={intro_slides} onDone={this._onDone}/>;
      }
    }
  }

我查看了the docs for Preloading assets in Expo's AppLoading component并尝试通过让_loadAssetsAsync()将JSON文件/数组设置为变量来模仿，但这会使加载花费更长的时间。有没有更好的方法'将本地JSON文件读入数组并预加载/缓存它'？

    async _loadAssetsAsync() {
      const collection = imagedata;
      await Promise.all([collection]);
    }

 render() {

      if (!this.state.fontLoaded || !this.state.isReady) {
        return <Expo.AppLoading
          startAsync={this._loadAssetsAsync}
          onFinish={() => this.setState({ isReady: true })}
          onError={console.warn}
        />;
      }
      ....

Answer 1

从expo docs看起来你的第二部分就是要走的路：

<Expo.AppLoading
      startAsync={this._loadAssetsAsync}
      onFinish={() => this.setState({ isReady: true })}

至于加载JSON数据：

import imageData from './assets/cleaned_imagesdata.json'; 
const shuffle = require('shuffle-array');
shuffle(imageData);

您应该在应用程序逻辑中执行此操作，例如在_loadAssetsAsync中，以便React知道它何时完成，而不是在顶层使用import语句。

这使得加载需要更长的时间

您正在加载的JSON文件有多大？如果性能是一个问题，您可以将其拆分为几个较小的JSON文件，并仅在需要时加载其余数据，例如：就在用户可以看到该数据之前？

React Native AppLoading - 如何保持加载屏幕直到完全导入本地JSON文件？

1 个答案: